[ FRONTEND ] _Vấn đề 2 table liên kết với nhau

Question

Tôi có một bảng ( Table1 ) chỉ chứa các thẻ th và bảng ( Table2 ) chỉ chứa các thẻ td. (Tôi biết thiết lập này có vẻ thực sự sai, nhưng nó được thiết lập theo cách này do một số vấn đề khác nhau vớ...

Accepted Answer

Một giải pháp khá đơn giản là sử dụng CSS để style lại chiều rộng của các thẻ `th`, `td`. Các này hơi tù nhưng mà đơn giản nhất để hotfix.
Bằng cách sử dụng CSS:
```css
#table-1 th, #table-2 td {
  width: 200px;
}
```

Kết hợp `nth-child()` hoặc một unique `id` của cột để tinh chỉnh kích thước riêng biệt cho từng cột.
```css
#table-1 th:nth-child(3),
#table-2 td:nth-child(3),
#table-1 th[data-id="column-3"],
#table-2 td[data-id="column-3"] {
  width: 100px;
}
```

Ngoài ra, phức tạp hơn một chút thì bạn kết sử dụng CSS và javascript, duyệt danh sách các cặp thẻ `#table-1 th` và `#table-2 td` tương ứng. Lấy độ rộng của thẻ lớn hơn và dùng nó để set chiều rộng cho thẻ còn lại. Có thể để max width bằng CSS để độ rộng một cột không quá lớn. Với cách này thì độ rộng không bị hard code như cách 1 và mềm mại hơn.

Trên đây là ý tưởng của mình, bạn thử xem áp dụng xem sao nhé.

Answer

bạn set width cho mỗi cột ở table 1, tương ứng với width cho mỗi cột ở table 2

2 ANSWERS