Spraw, aby 2 tabele miały te same rozmiary kolumn.

Question

Mam 2 tabele HTML, które znajdują się bezpośrednio jeden na drugim. Każda tabela ma taką samą liczbę kolumn, ale tekst, który zawierają, może się różnić. Każda tabela może zawierać wiele wierszy. Chciałbym, aby te 2 tabele miały dokładnie taką samą szerokość kolumny, aby kolumny zawsze były wyrównane. Nie mam nic przeciwko temu, żeby tekst w kolumnach zawijał tyle, ile trzeba. I nie mogę połączyć wszystkich wierszy w jeden stół z innych powodów.

Czy jest jakiś sposób, aby tak się stało?

Należy zauważyć, że to rozwiązanie działa tylko w Firefoksie i dwóch ostatnich wersjach IE.

Answer 1

O ile wiem, nie można wyrównać kolumn dwóch stołów.

Możesz utworzyć jedną tabelę i użyć css, aby wyglądała jak dwie.

<table> 
    <tr> <!-- First table header --> </tr> 
    <tr> <!-- First table rows... --></tr> 
    <tr> <!-- First table footer... --></tr> 
    <tr> <!-- Empty space between tables --> </tr> 
    <tr> <!-- Second table header --> </tr> 
    <tr> <!-- Second table rows... --></tr> 
    <tr> <!-- Second table footer... --></tr> 
</table> 

Answer 2

Proponuję użyć szerokości procentowej na kolumnach, upewniając się, że te szerokości zawsze sumują się do 100%.

<style type="text/css"> 
    table { width: 100%; } 
    td.colA { width: 30%; } 
    td.colB { width: 70%; } 
</style> 

<table> 
    <tr> 
    <td class="colA">Lorem ipsum</td> 
    <td class="colB">Lorem ipsum</td> 
    </tr> 
</table> 

<table> 
    <tr> 
    <td class="colA">Lorem ipsum</td> 
    <td class="colB">Lorem ipsum</td> 
    </tr> 
</table> 

Answer 3

Komórki tabeli są płynne w naturze, tak, że nie jest to możliwe tylko w html/css chyba że im kolumn stałą szerokość (stałe mogą być oczywiście również w procentach).

Można oczywiście użyć javascript, aby znaleźć najszerszą tabelę, uzyskać szerokość kolumn i użyć tych wartości dla mniejszej tabeli, ale rozwiązanie sugerowane przez belugabob jako komentarz do twojego pytania jest znacznie lepsze.

Answer 4

Mam podobną sytuację naprawioną dla mojej witryny na IE 9, Chrome 14 i FireFox 8 z następującym Moja tabela zawiera cztery kolumny, nieparzyste zawierają etykiety, a nawet zawiera dane wejściowe. Mam cztery tabele na mojej stronie i wszystkie kolumny każdej tabeli są wyrównane w pionie. Nadzieję, że te kroki pomogłyby

1- pobrać przezroczysty obraz z dowolnego miejsca, prawdopodobnie o rozmiarze 1x1, dzięki czemu można regulować jego rozmiar jak na swoje potrzeby (nie wiem, czy to obraz może być zbyt skurczył przez CSS)

2- Zdefiniować tabelę jako

<table class="formed"> 
      <tr> 
       <th class="colLabel"></th> 
       <th class="colField"></th> 
       <th class="colLabel"></th> 
       <th class="colField"></th> 
      </tr> 
     <tr> 
      <td></td> 
[now rest of your columns row by row] 

3- Określ swój css jako

.colLabel 
{ 
    text-align:right; 
    padding-right:0em; 
    height:auto; 
    background-image:url(Resources/Images/transparent.gif); 
    background-repeat:no-repeat; 
    width:8em; 
} 
.colField 
{ 
    text-align:left; 
    padding-right:0em; 
    height:auto; 
    background-image:url(Resources/Images/transparent.gif); 
    background-repeat:no-repeat; 
    width:20em; 
} 

.formed 
{ 
    width:90%; 
    table-layout:fixed; 
    padding:0; 
    margin:0; 
}