HTML quebrar colunas de tabelas html

Div · 19 de agosto de 2021

ola pessoal estou com uma duvida qui... a forma que eu resolvi foi dar display block na tabela e mostrar outra isto quando chega a uma certa largura no caso sm para celular... sendo mais claro tenho uma tabela normal com duas colunas.

<table border="1">
    <tr>
        <td>Nome</td>
    </tr>
    <tr>
        <td>Ted</td>
        <td>Estudante</td>
    </tr>
    <tr>
        <td>Ralf</td>
        <td>Designer</td>
    </tr>
</table>

eu tenho duas colunas na ex: largula 100px e o certo seria quando chega-se a uma largura ela quebraria as duas colunas em apenas uma.... já quebrei a cabeça nisso e pesquisei bastante acho que o certo seria eu trocar a propriedade via js que é o que eu estou testando agora... mais se tivesse uma forma com css seria bem interessante
usando @breckpoints

a tabela mesmo que estou fazendo esta aqui

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<table>
              <thead>
                <div class="card_conta_body">
                  <p class="">Conquistas:</p>
                </div>
              </thead>
              <tbody>
                <tr align="left">
                  <td class="col-6">
                    <div class="card_body"><i class="faz fa-circle"></i> online</div>
                    <div class="card_body"><i class="faz fa-coins"></i> moedas: 999</div>
                    <div class="card_body"><i class="faz fa-crown"></i> capítulos lidos</div>
                    <div class="card_body"><i class="faz fa-comments-alt"></i> comentários</div>
                    <div class="card_body"><i class="faz fa-circle"></i> online</div>
                    <div class="card_body"><i class="faz fa-image"></i> Imagens</div>
                    <div class="side-menu_3">
                      <a href="#">
                        <li>One piece</li>
                      </a>
                      <a href="#">
                        <li>Naruto</li>
                      </a>
                      <a href="#">
                        <li>Faity Tail</li>
                      </a>
                      <a href="#">
                        <li>Demon Sailer</li>
                      </a>
                      <a href="#">
                        <li>Bleack</li>
                      </a>
                      <a href="#">
                        <li>Drãgon Ball</li>
                      </a>
                      <a href="#">
                        <li>Black Clover</li>
                      </a>
                      <a href="#">
                        <li>One piece</li>
                      </a>
                      <a href="#">
                        <li>Naruto</li>
                      </a>
                      <a href="#">
                        <li>Faity Tail</li>
                      </a>
                      <a href="#">
                        <li>Demon Sailer</li>
                      </a>
                      <a href="#">
                        <li>Bleack</li>
                      </a>
                      <a href="#">
                        <li>Drãgon Ball</li>
                      </a>
                      <a href="#">
                        <li>Black Clover</li>
                      </a>
                    
                    </div>
                  </td>
                  <td class="col-6">
                    <div class="card_body"><i class="faz fa-trophy"></i> (xxx,xxx,xxx,xxx,xxx) ver mais...</div>
                    <div class="card_body"><i class="faz fa-medal"></i> (xxx,xxx,xxx) ver mais...</div>
                    <div class="card_body"><i class="faz fa-fire"></i> dias de acesso</div>
                    <div class="card_body"><i class="faz fa-users"></i> Amigos</div>
                    <div class="card_body"><i class="faz fa-comment-alt-smile"></i> Respostas: null</div>
                    <div class="card_body"><i class="faz fa-image"></i> Respostas:</div>
                    <div class="side-menu_3">
                      <a href="#">
                        <li>One piece</li>
                      </a>
                      <a href="#">
                        <li>Naruto</li>
                      </a>
                      <a href="#">
                        <li>Faity Tail</li>
                      </a>
                      <a href="#">
                        <li>Demon Sailer</li>
                      </a>
                      <a href="#">
                        <li>Bleack</li>
                      </a>
                      <a href="#">
                        <li>Drãgon Ball</li>
                      </a>
                      <a href="#">
                        <li>Black Clover</li>
                      </a>
                      <a href="#">
                        <li>One piece</li>
                      </a>
                      <a href="#">
                        <li>Naruto</li>
                      </a>
                      <a href="#">
                        <li>Faity Tail</li>
                      </a>
                      <a href="#">
                        <li>Demon Sailer</li>
                      </a>
                      <a href="#">
                        <li>Bleack</li>
                      </a>
                      <a href="#">
                        <li>Drãgon Ball</li>
                      </a>
                      <a href="#">
                        <li>Black Clover</li>
                      </a>
                    
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>

</body>
</html>

DiF · 20 de agosto de 2021

@cerumaninho Olá.

Basicamente tudo que você precisa fazer é usar mediaqueries.

Algo do tipo:

@media all and (max-width:300px){
   /* Colocar aqui dentro o código css da tabela*/

}

Aqui tem dois exemplos diferentes com o mesmo propósito. Estude o código deles para entender o que foi feito.

http://jsfiddle.net/dife/kjzdf54b/

http://jsfiddle.net/dife/nhbrgL73/

Em ambos, arraste a tela para o lado para ver o efeito.

Div · 20 de agosto de 2021

@DiF Obrigado de novo div<3... hooo eu fiz assim também mais com uma abordagem diferente

<h1>RWD List to Table</h1>
<table class="rwd-table">
  <tr>
    <th>Movie Title</th>
    <th>Genre</th>
    <th>Year</th>
    <th>Gross</th>
  </tr>
  <tr>
    <td data-th="Movie Title">Star Wars</td>
    <td data-th="Genre">Adventure, Sci-fi</td>
    <td data-th="Year">1977</td>
    <td data-th="Gross">$460,935,665</td>
  </tr>
  <tr>
    <td data-th="Movie Title">Howard The Duck</td>
    <td data-th="Genre">"Comedy"</td>
    <td data-th="Year">1986</td>
    <td data-th="Gross">$16,295,774</td>
  </tr>
  <tr>
    <td data-th="Movie Title">American Graffiti</td>
    <td data-th="Genre">Comedy, Drama</td>
    <td data-th="Year">1973</td>
    <td data-th="Gross">$115,000,000</td>
  </tr>
</table>

<p>&larr; Drag window (in editor or full page view) to see the effect. &rarr;</p>

@import "compass/css3";

// More practical CSS...
// using mobile first method (IE8,7 requires respond.js polyfill https://github.com/scottjehl/Respond)

$breakpoint-alpha: 480px; // adjust to your needs

.rwd-table {
  margin: 1em 0;
  min-width: 300px; // adjust to your needs
  
  tr {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  
  th {
    display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!   
  }
  
  td {
    display: block; 
    
    &:first-child {
      padding-top: .5em;
    }
    &:last-child {
      padding-bottom: .5em;
    }

    &:before {
      content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
      font-weight: bold;

      // optional stuff to make it look nicer
      width: 6.5em; // magic number :( adjust according to your own content
      display: inline-block;
      // end options
      
      @media (min-width: $breakpoint-alpha) {
        display: none;
      }
    }
  }
  
  th, td {
    text-align: left;
    
    @media (min-width: $breakpoint-alpha) {
      display: table-cell;
      padding: .25em .5em;
      
      &:first-child {
        padding-left: 0;
      }
      
      &:last-child {
        padding-right: 0;
      }
    }

  }
  
  
}


// presentational styling

@import 'https://fonts.googleapis.com/css?family=Montserrat:300,400,700';

body {
  padding: 0 2em;
  font-family: Montserrat, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #444;
  background: #eee;
}

h1 {
  font-weight: normal;
  letter-spacing: -1px;
  color: #34495E;
}

.rwd-table {
  background: #34495E;
  color: #fff;
  border-radius: .4em;
  overflow: hidden;
  tr {
    border-color: lighten(#34495E, 10%);
  }
  th, td {
    margin: .5em 1em;
    @media (min-width: $breakpoint-alpha) { 
      padding: 1em !important; 
    }
  }
  th, td:before {
    color: #dd5;
  }
}