Larghezza uguale cella cella-tabella CSS

Ho un numero indeterminato di elementi di celle di tabella all'interno di un contenitore di tabelle.

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

Esiste un modo CSS puro per far sì che le celle della tabella abbiano la stessa larghezza anche se al loro interno hanno contenuti di dimensioni diverse?

Grazie.

Modifica: Avere una larghezza massima implicherebbe sapere quante celle hai penso?

Ecco un violino funzionante con un numero indeterminato di celle: http://jsfiddle.net/r9yrM/1/

Puoi fissare una larghezza a ciascun genitore div(la tabella ), altrimenti sarà normale al 100%.

Il trucco è usare table-layout: fixed;e una certa larghezza su ogni cella per attivarlo, qui il 2%. Ciò attiverà l' altro algoritmo di tabella, quello in cui i browser si sforzano molto di rispettare le dimensioni indicate.
Si prega di testare con Chrome (e IE8- se necessario). Va bene con un Safari recente ma non ricordo la compatibilità di questo trucco con loro.

CSS (istruzioni pertinenti):

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): Attenzione a Safari 6 su OS X, ha table-layout: fixed; sbagliato (o forse solo diverso, molto diverso dagli altri browser. Non ho letto le bozze del layout della tabella REC CSS2.1;)). Preparati a risultati diversi.

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.

Usando solo max-width: 0nel display: table-cellelemento funzionato per me:

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

Sostituire

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

Guarda tutti i problemi che circondano il tentativo di far funzionare i div come tabelle. Hanno dovuto aggiungere table-xxx per imitare i layout delle tabelle

Le tabelle sono supportate e funzionano molto bene in tutti i browser. Perché abbandonarli? il fatto che dovevano imitarli è la prova che hanno fatto bene il loro lavoro.

A mio avviso, utilizzare lo strumento migliore per il lavoro e se si desidera che i dati siano tabulari o qualcosa che assomigli a tabelle di dati tabulari, funzioni.

Risposta molto tardi lo so, ma vale la pena esprimere.

questo funzionerà per tutti

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

Questo funzionerà anche per i dati di tabella creati dall'iterazione

Ecco qui:

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

Non è possibile utilizzare larghezza: 100 px, poiché il display è una cella di tabella. Puoi tuttavia utilizzare Larghezza massima: 100 px. quindi la tua scatola non sarà mai più grande di 100px. ma devi aggiungere un overflow: nascosto per assicurarti che il contect non sanguini su altre celle. puoi anche aggiungere uno spazio bianco: nowrap se desideri che l'altezza non aumenti.

Questo può essere fatto impostando lo stile della cella di tabella su width: autoe il contenuto è vuoto. Le colonne sono ora uguali in larghezza, ma non contengono alcun contenuto.

Per inserire contenuto nella cella, aggiungi un divcon css:

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

È inoltre necessario aggiungere position: relativealle celle.

Ora puoi inserire il contenuto effettivo nel div di cui sopra.

https://jsfiddle.net/vensdvvb/