Come mantenere sincronizzate le larghezze delle colonne di due tabelle durante il ridimensionamento?

Question

Mi sono guardato un po 'in giro e non riesco a trovare una soluzione decente, che non richiede un pazzo JavaScript, al seguente problema.

Ci sono due tavoli separati nell'esempio. Il primo è solo per le intestazioni. Il secondo è per il corpo. Abbiamo bisogno di due tabelle perché il requisito per questa funzione è che la tabella del corpo sia localmente scorrevole, il che significa che le intestazioni devono rimanere visibili mentre il corpo della tabella scorre. Non possiamo usare nuove tabelle pivot HTML 5, perché dobbiamo supportare IE.

C'è un modo per realizzare questo con puro CSS? Non deve essere perfetto, basta che appaia decente, è tutto ciò di cui ho bisogno.

Answer 1

Decisamente fattibile solo con i CSS. Basta impostare le larghezze su entrambe le tabelle, trs e tds, applicare il wrapping delle parole e impostare il layout della tabella su fisso. Quest'ultima impostazione consente di utilizzare le larghezze di colonna definite anziché essere determinate dalla larghezza del contenuto della cella.

#tb1 {  width: 80%;  } 
 

 
#tb2 {  width: 80%;  } 
 

 
#tb1 tr {  width: 100%;  } 
 

 
#tb2 tr {  width: 100%;  } 
 

 
.col1 {  width: 35%;  } 
 
.col2 {  width: 35%;  } 
 
.col3 {  width: 20%;  } 
 
.col4 {  width: 10%;  } 
 

 
#tb1, #tb2 {  table-layout: fixed;  } 
 
#tb1 td, #tb2 td {  word-wrap: break-word;  }

<table id="tb1" border="1"> 
 
    <tr> 
 
    <td class="col1">Title 1</td> 
 
    <td class="col2">Title 2</td> 
 
    <td class="col3">Title 3</td> 
 
    <td class="col4">Title 4</td> 
 
    </tr> 
 
</table> 
 

 
<table id="tb2" border="1"> 
 
    <tr> 
 
    <td class="col1">Content 00001</td> 
 
    <td class="col2">Content 02</td> 
 
    <td class="col3">Content 0000000000003</td> 
 
    <td class="col4">Content 000000000000000000004</td> 
 
    </tr> 
 
</table>

Answer 2

Questo è un esempio del concetto, utilizzando Jquery. (Si può fare di vaniglia, ma richiede più codice)

<table id="tb1" border="1"> 
     <tr> 
      <td>Title 1</td> 
      <td>Title 2</td> 
      <td>Title 3</td> 
      <td>Title 4</td> 
     </tr> 
    </table> 

    <table id="tb2" border="1"> 
     <tr> 
      <td>Content 00001</td> 
      <td>Content 02</td> 
      <td>Content 0000000000003</td> 
      <td>Content 000000000000000000004</td> 
     </tr> 
    </table> 

JS:

function SetSize() { 
    var i = 0; 
    $("#tb2 tr").first().find("td").each(function() { 
     $($("#tb1 tr").first().find("td")[i]).width(
      $(this).width() 
     ); 
     i++; 
    }); 
} 
$(window).resize(SetSize); 
SetSize(); 

No "javascript pazzo": D
Ecco un violino di lavoro, con un paio di CSS per farlo sembrare meglio: http://jsfiddle.net/5mfVT/

Answer 3

Le tabelle vengono ridimensionate il più possibile. La tabella delle intestazioni ha un contenuto più ristretto e può quindi ridimensionarsi a larghezze minori prima di procedere al ridimensionamento.
Una soluzione non Javascript è definire le larghezze per tutte le colonne o definire una proprietà min-width le tabelle che si adattano al più grande delle due larghezze minime.