Usando CSS para criar células de tabela de uma largura específica com nenhuma palavra de embrulho

Question

Em um projeto ter sido envolvido em I necessário para tornar tabelas com colunas de largura específica com apenas uma linha de HTML cada linha da tabela (sem embalagem). Eu preciso cada célula da tabela para ter um preenchimento de 1 pixel na parte superior e inferior e 2 pixels à esquerda e à direita. A melhor maneira que pode vir até com que as obras cross browser é colocar uma div dentro de um td dentro da tabela da seguinte maneira:

<style>
  table.grid { border: none; border-collapse: collapse; }
  table.grid tbody tr td { padding: 1px 2px; }
  table.grid tbody tr td div { overflow: hidden; white-space: nowrap; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><div>One</div></td>
      <td class="two"><div>Two</div></td>
    </tr>
    <tr>
      <td class="one"><div>Another One</div></td>
      <td class="two"><div>Another Two</div></td>
    </tr>
  </tbody>
</table>

Eu adoraria ser capaz de eliminar a necessidade de adicionar a div extra. Eu passar muitas horas pesquisando esta questão, mas não consegue encontrar uma alternativa.

Existe uma maneira de fazer o que eu preciso, sem a necessidade de adicionar a div extra? Se assim for, o que é?

Existe uma maneira de obter o resultado desejado sem usar tabelas em tudo?

Answer 1

Infelizmente os elementos da tabela não respeitam estouro, assim você terá que aplicar isso a um elemento filho.

edit: Eu posso ter falado cedo demais, como eu posso criar esse efeito em FF usando max-width e eu descobri essa coisa que pode funcionar para o IE. Você aprende algo todos os dias.

edit2: sim ele funciona para o IE7, pelo menos, mas há uma ressalva grave que você não pode ter espaços em branco no texto, eles têm que ser convertido para  . Eu acho que você provavelmente deve ficar com a solução <div> por causa de limpeza e compatibilidade.

Answer 2

Na verdade, pode .

Normalmente, a tabela ocupa o espaço que ele precisa. Se você dá a table uma largura de 100%, ele terá 100% do com e compartilhamento que entre as células em relação a seu conteúdo .

Não há espaço livre em uma tabela:., Em algum momento, deve haver uma célula que ocupa o espaço restante uma vez que o tamanho dos outros têm sido set

Para definir a largura de um celular, você precisa dar-lhe um width e uma max-width para o mesmo tamanho . Para uma tabela com colunas N, você pode fazer isso a n-1 colunas, e a última coluna terá o espaço restante.

Se você fizer isso a N-2 colunas, duas colunas que não têm fixas com a vontade de compartilhar o espaço restante.

Tendo tudo isso, você pode adicionar white-space:no-wrap e / ou text-overflow:ellipsis se desejar.

Aqui está um exemplo de imagem (meu leitor RSS): https: //i.stack. imgur.com/bPpKP.png

E um exemplo vivo: https://codepen.io/lehollandaisvolant/pen/ REVNLy? editores = 1100

Você pode ver que ele é realmente incrivelmente poderoso. No codepen, você pode ver:

• algumas células são fixos largura
• algumas células se encaixam ao texto que ele contém
• algumas células encaixar o recipiente

E você pode decidir o comportamento de cada célula (desde que há uma célula que se encaixa para o recipiente)

Answer 3

Você não deve precisar de um ninho div dentro de cada célula da tabela. O seguinte deve conseguir o mesmo efeito.

<style>
  table.grid { border-collapse: collapse; }
  table.grid tbody tr td { overflow: hidden; white-space: nowrap; padding: 1px 2px; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><span>One</span></td>
      <td class="two"><span>Two</span></td>
    </tr>
    <tr>
      <td class="one"><span>Another One</span></td>
      <td class="two"><span>Another Two</span></td>
    </tr>
  </tbody>
</table>

Answer 4

Você também pode simplesmente substituir a tabela de div.

Em seguida, você tem que definir a largura da coluna em CSS (que pode ser complicado para chegar ao trabalho em todos os navegadores).

Exemplo: Seu código seria então semelhante a este:

<div class="mainBoxOfTable">
    <div class="Line">
      <div class="ColumnOne">One</div>
      <div class="ColumnTwo">Two</div>
    </div>
    <div class="Line">
      <div class="ColumnOne">another One</div>
      <div class="ColumnTwo">another Two</div>
    </div>
 </div>