Tôi đã thực hiện một bảng như vậy:HTML cột bảng rộng: kết hợp cố định và biến độ rộng
<table style="width:1000px;">
<tr>
<td>aaa</td>
<td id="space"></td>
<td class="fixed-width">bbb</td>
<td class="fixed-width">ccc</td>
</tr>
</table>
Làm thế nào tôi sẽ làm CSS sao cho b và c cột có chiều rộng cố định, một cột chỉ mất nhiều không gian khi cần thiết và cột khoảng trống để mở rộng để lấp đầy phần còn lại của bảng?
Tôi không có chuyên gia về CSS, nhưng dường như không có cách nào để thực hiện việc này. Điều này dường như hoạt động trong Firefox và IE7. Tôi chưa kiểm tra các trình duyệt khác.
Thu nhỏ đầu tiên để phù hợp <col> được đặt (sử dụng CSS) thành 0 chiều rộng, do đó nó co lại để vừa với nội dung.
Không gian thứ hai <col> được đặt (sử dụng CSS) thành chiều rộng lớn hơn vừa với bảng.
Chiều rộng của hai chiều rộng cố định cuối cùng <col> s không nằm trên <col>. Thay vào đó, nó được đặt trên kiểu <td>. Điều này buộc chiều rộng cột.
<!DOCTYPE html>
<html>
<head>
<title>cols</title>
<style type="text/css">
td.fixed-width {
width: 100px;
background-color:aqua
}
td.min-width {background-color:aqua}
td.space {border: thick blue solid}
</style>
</head>
<body style="width:1100px; font-family:sans-serif">
<table style="width:1000px;">
<col style="width:0"/>
<col style="width:1000px"/>
<col span="2" />
<tr>
<td class="min-width">aaa</td>
<td class="space"></td>
<td class="fixed-width">bbb</td>
<td class="fixed-width">ccc</td>
</tr>
<tr>
<td class="min-width">aaa asdfasdf asdfsad</td>
<td class="space"></td>
<td class="fixed-width">bbb fasdas</td>
<td class="fixed-width">ccc vdafgf asdf adfa a af</td>
</tr>
</table>
</body>
</html>
Điều này đã hiệu quả! Cảm ơn rất nhiều. – whotemp
@whotemp - bạn được chào đón. Tôi đã sử dụng thông số kỹ thuật CSS 2.1 để xem liệu tôi có thể tìm thấy bất cứ điều gì yêu cầu hành vi này và không. Điều tôi nói là, trong trường hợp thiếu không gian ngang trong một bảng, có ưu tiên cao hơn cho việc đưa các ô vào một cột mà chúng yêu cầu, hơn là cung cấp chiều rộng