Làm cho 2 bảng có cùng kích thước cột

Question

Tôi có 2 bảng HTML nằm ngay trên đầu trang của nhau. Mỗi bảng có cùng số cột, nhưng văn bản mà chúng chứa có thể khác nhau. Và mỗi bảng có thể chứa nhiều hàng. Tôi muốn cho 2 bảng này có cùng chiều rộng cột giống nhau để các cột luôn xếp hàng. Tôi không quan tâm nếu văn bản trong các cột kết thúc tốt đẹp nhiều như cần thiết. Và tôi không thể kết hợp tất cả các hàng thành một bảng đơn vì những lý do khác.

Có cách nào để thực hiện điều này không?

Lưu ý rằng giải pháp này chỉ hoạt động trong Firefox và 2 phiên bản cuối cùng của IE.

Answer 1

Theo như tôi biết, bạn không thể căn chỉnh các cột của hai bảng.

Bạn có thể tạo một bảng và sử dụng css để làm cho nó trông giống như hai.

<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

Tôi khuyên bạn nên sử dụng độ rộng phần trăm trên các cột của mình, đảm bảo rằng các chiều rộng đó luôn thêm tối đa 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

Các ô bảng là chất lỏng, vì vậy không thể chỉ trong html/css trừ khi bạn cung cấp cho cột một chiều rộng cố định (cố định tất nhiên cũng là phần trăm). Tất nhiên, bạn có thể sử dụng javascript để tìm bảng rộng nhất, có chiều rộng cột và sử dụng các giá trị đó cho bảng nhỏ hơn, nhưng giải pháp được belugabob đề xuất là nhận xét cho câu hỏi của bạn tốt hơn nhiều.

Answer 4

Tôi có tình huống tương tự được sửa cho trang web của mình trên IE 9, Chrome 14 và FireFox 8 với sau Bảng của tôi chứa bốn cột, các cột lẻ chứa nhãn và thậm chí chứa đầu vào. Tôi có bốn bảng trên trang của tôi và tất cả các cột của mỗi bảng được căn chỉnh theo chiều dọc. Hy vọng các bước sau sẽ giúp

1- Tải một hình ảnh trong suốt từ bất cứ nơi nào, có lẽ kích thước 1x1 để bạn có thể điều chỉnh kích thước của nó theo nhu cầu của bạn (không chắc chắn nếu một hình ảnh có thể được thu nhỏ quá bởi css)

2- Xác định bảng của bạn như

<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- Xác định css của bạn như

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