Largura igual da célula da tabela CSS

Eu tenho um número indeterminado de elementos de célula de tabela dentro de um contêiner de tabela.

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell;"></div>
</div>

Existe uma maneira CSS pura de obter que as células da tabela tenham largura igual, mesmo que tenham conteúdo de tamanho diferente?

Obrigado.

Edit: Ter uma largura máxima implicaria saber quantas células você tem, eu acho?

Aqui está um violino que funciona com número indeterminado de células: http://jsfiddle.net/r9yrM/1/

Você pode fixar uma largura para cada pai div(a tabela ), caso contrário, será 100% como de costume.

O truque é usar table-layout: fixed;e alguma largura em cada célula para acioná-lo, aqui 2%. Isso acionará o outro algoritmo da tabela, aquele em que os navegadores tentam muito respeitar as dimensões indicadas.
Teste com o Chrome (e IE8, se necessário). Tudo bem com um Safari recente, mas não me lembro da compatibilidade desse truque com eles.

CSS (instruções relevantes):

div {
    display: table;
    width: 250px;
    table-layout: fixed;
}

div > div {
    display: table-cell;
    width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

EDIT (2013): Cuidado com o Safari 6 no OS X, ele está table-layout: fixed; errado (ou talvez apenas diferente, muito diferente de outros navegadores. Não fiz a revisão do layout da tabela CSS2.1 REC;)). Esteja preparado para resultados diferentes.

HTML

<div class="table">
    <div class="table_cell">Cell-1</div>
    <div class="table_cell">Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2</div>
    <div class="table_cell">Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3</div>
    <div class="table_cell">Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4</div>
</div>​

CSS

.table{
    display:table;
    width:100%;
    table-layout:fixed;
}
.table_cell{
    display:table-cell;
    width:100px;
    border:solid black 1px;
}

DEMO.

Apenas usar max-width: 0o display: table-cellelemento funcionou para mim:

.table {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  max-width: 0px;
  border: 1px solid gray;
}

<div class="table">
  <div class="table-cell">short</div>
  <div class="table-cell">loooooong</div>
  <div class="table-cell">Veeeeeeery loooooong</div>
</div>

Substituir

  <div style="display:table;">
    <div style="display:table-cell;"></div>
    <div style="display:table-cell;"></div>
  </div>

com

  <table>
    <tr><td>content cell1</td></tr>
    <tr><td>content cell1</td></tr>
  </table>

Veja todos os problemas relacionados à tentativa de fazer com que os divs funcionem como tabelas. Eles tiveram que adicionar table-xxx para imitar layouts de tabela

As tabelas são suportadas e funcionam muito bem em todos os navegadores. Por que abandoná-los? o fato de que eles precisavam imitá-los é uma prova de que eles cumpriram bem o seu trabalho.

Na minha opinião, use a melhor ferramenta para o trabalho e, se você quiser dados tabulados ou algo parecido com tabelas de dados tabulados, basta trabalhar.

Resposta muito tardia, eu sei, mas vale a pena expressar.

isso vai funcionar para todos

<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">
<!-- set the table td element roll attr to gridcell -->
<tr>
<td roll="gridcell"></td>
</tr>
</table>

Isso também funcionará para dados da tabela criados pela iteração

Aqui está:

http://jsfiddle.net/damsarabi/gwAdA/

Você não pode usar width: 100px, porque a exibição é célula de tabela. No entanto, você pode usar Largura máxima: 100px. sua caixa nunca ficará maior que 100 px. mas você precisa adicionar overflow: hidden para garantir que o conteúdo não sangre para outras células. você também pode adicionar espaço em branco: nowrap se desejar impedir que a altura aumente.

Isso pode ser feito configurando o estilo da célula da tabela como width: autoe o conteúdo vazio. As colunas agora têm a mesma largura, mas não contêm conteúdo.

Para inserir conteúdo na célula, adicione um divcom css:

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;

Você também precisa adicionar position: relativeàs células.

Agora você pode colocar o conteúdo real na div mencionada acima.

https://jsfiddle.net/vensdvvb/