Ancho igual de celda de tabla CSS

Tengo un número indeterminado de elementos de celda de tabla dentro de un contenedor de tabla.

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

¿Hay una manera pura de CSS para que las celdas de la tabla tengan el mismo ancho incluso si tienen contenido de diferente tamaño dentro de ellas?

Gracias.

Editar: ¿Tener un ancho máximo implicaría saber cuántas celdas tiene, creo?

Aquí hay un violín que funciona con un número indeterminado de celdas: http://jsfiddle.net/r9yrM/1/

Puede fijar un ancho a cada padre div(la tabla ), de lo contrario será 100% como de costumbre.

El truco es usar un table-layout: fixed;poco de ancho en cada celda para activarlo, aquí 2%. Eso activará el otro algoritmo de la tabla, aquel en el que los navegadores se esfuerzan mucho por respetar las dimensiones indicadas.
Pruebe con Chrome (e IE8, si es necesario). Está bien con un Safari reciente, pero no recuerdo la compatibilidad de este truco con ellos.

CSS (instrucciones 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 */
}

EDITAR (2013): Cuidado con Safari 6 en OS X, tiene un table-layout: fixed; error (o tal vez simplemente diferente, muy diferente de otros navegadores. No revisé el diseño de la tabla CSS2.1 REC;)). Prepárate para diferentes resultados.

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;
}

MANIFESTACIÓN.

Solo usar max-width: 0en el display: table-cellelemento funcionó para mí:

.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>

Reemplazar

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

con

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

Mire todos los problemas relacionados con el intento de hacer que los divs funcionen como tablas. Tuvieron que agregar table-xxx para imitar diseños de tabla

Las tablas son compatibles y funcionan muy bien en todos los navegadores. ¿Por qué deshacerse de ellos? el hecho de que tuvieran que imitarlos es una prueba de que hicieron bien su trabajo.

En mi opinión, use la mejor herramienta para el trabajo y si desea datos tabulados o algo similar a las tablas de datos tabulados, simplemente funcione.

Respuesta muy tardía, lo sé, pero vale la pena expresarlo.

esto 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>

Esto también funcionará para los datos de la tabla creados por iteración

Aqui tienes:

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

No puede usar ancho: 100px, porque la pantalla es celda de tabla. Sin embargo, puede usar Max-width: 100px. entonces su caja nunca será más grande que 100px. pero debe agregar desbordamiento: oculto para asegurarse de que el contenido no sangra a otras celdas. también puede agregar espacios en blanco: ahora si desea evitar que la altura aumente.

Esto se puede hacer estableciendo el estilo de celda de tabla width: autoy el contenido vacío. Las columnas ahora tienen el mismo ancho, pero no tienen contenido.

Para insertar contenido en la celda, agregue un divcon css:

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

También necesita agregar position: relativea las celdas.

Ahora puede poner el contenido real en el div mencionado anteriormente.

https://jsfiddle.net/vensdvvb/