Bootstrap Quebra de Linha na Tabela

No Bootstrap, podemos usar classes específicas para quebrar linhas dentro de uma tabela. Isso pode ser útil quando temos muitos conteúdos em uma única célula de tabela e precisamos evitar a quebra horizontal de linhas.

Podemos utilizar a classe table-responsive em conjunto com a classe w-100 para criar uma tabela responsiva que irá quebrar linhas quando necessário. Veja o exemplo abaixo:

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nome</th>
        <th scope="col">Descrição</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Item 1</td>
        <td class="w-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur eros vitae turpis faucibus, in aliquam enim tempus. Duis blandit convallis purus, a placerat lacus iaculis vitae. Donec a auctor velit, a pharetra justo.</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Item 2</td>
        <td class="w-100">Nulla facilisi. Proin sit amet justo ornare, commodo ligula nec, hendrerit nisi. Mauris rhoncus odio id hendrerit auctor. Sed ut finibus sem. Integer eleifend ex a justo convallis, vitae mattis nulla dictum.</td>
      </tr>
    </tbody>
  </table>
</div>

Neste exemplo, usamos a classe w-100 na célula de tabela que contém o texto longo para quebrar a linha automaticamente. A classe table-responsive torna a tabela responsiva, permitindo a rolagem horizontal em dispositivos menores.

Dessa forma, garantimos que o conteúdo seja exibido adequadamente em dispositivos com tamanhos de tela reduzidos, evitando a quebra horizontal indesejada nas células da tabela.