W jaki sposób zachować dwie kolumny kolumn podczas synchronizacji podczas zmiany rozmiaru?

Question

Rozejrzałem się trochę i nie mogę znaleźć odpowiedniego rozwiązania, które nie wymaga jakiegoś zwariowanego JavaScriptu, do następującego problemu.

Istnieją dwie osobne tabele w przykładzie. Pierwsza dotyczy tylko nagłówków. Drugi jest dla ciała. Potrzebujemy dwóch tabel, ponieważ wymaganie tej funkcji polega na tym, że tablica treści może być przemieszczana lokalnie, co oznacza, że ​​nagłówki muszą pozostać widoczne podczas przewijania zawartości tabeli. Nie możemy używać żadnych nowych fantazyjnych tabel HTML 5, ponieważ musimy obsługiwać IE.

Czy można to osiągnąć za pomocą czystego CSS? To nie musi być doskonałe, tak długo, jak wygląda przyzwoicie, to wszystko, czego potrzebuję.

Answer 1

Zdecydowanie wykonalne w samym CSS. Po prostu ustaw szerokość na obu tabelach, trs i td, zastosuj zawijanie słów i ustal ustawienia układu tabeli. To ostatnie ustawienie powoduje, że używa on zdefiniowanych szerokości kolumn, a nie zależy od szerokości zawartości komórki.

#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

To jest próbka koncepcji, używając Jquery. (Można zrobić to wanilia, ale wymaga więcej kodu)

<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(); 

Nie "szalony javascript": D
Oto skrzypce roboczego, z kilkoma css, aby wyglądać lepiej: http://jsfiddle.net/5mfVT/

Answer 3

Tabele zmieniają się tak małe, jak to możliwe. Twoja tabela nagłówków ma węższą zawartość i dlatego może zostać zmieniona na mniejsze szerokości przed zajęciem, aby zmienić rozmiar.
Rozwiązaniem innym niż Javascript jest zdefiniowanie szerokości dla wszystkich kolumn lub zdefiniowanie właściwości min-width dla tabel, które pasują do większej z dwóch minimalnych szerokości.