Đặt tdchiều cao nhỏ hơn mức tự nhiên chiều cao của nội dung
Vì các ô trong bảng muốn ít nhất phải đủ lớn để bao bọc nội dung của chúng, nên nếu nội dung không có chiều cao rõ ràng, các ô có thể được thay đổi kích thước tùy ý.
Bằng cách thay đổi kích thước các ô, chúng ta có thể kiểm soát chiều cao của hàng.
Một cách để làm điều này là đặt nội dung với một absolutevị trí trong relativeô, và đặt heightô cũng như leftvà topcủa nội dung.
table {
width: 100%;
}
td {
border: 1px solid #999;
}
.set-height td {
position: relative;
overflow: hidden;
height: 3em;
}
.set-height p {
position: absolute;
margin: 0;
top: 0;
}
/* table layout fixed */
.layout-fixed {
table-layout: fixed;
}
/* td width */
.td-width td:first-child {
width: 33%;
}
<table><tbody>
<tr class="set-height">
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
<td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
</tbody></table>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><tbody>
<tr class="set-height">
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
<td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
</tbody></table>
<h3>With <code><td> width</code> applied:</h3>
<table class="td-width"><tbody>
<tr class="set-height">
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
<td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
</tbody></table>
Các table-layout sản
Bảng thứ hai trong đoạn mã trên có table-layout: fixed được áp dụng, làm cho các ô có chiều rộng bằng nhau, bất kể nội dung của chúng, bên trong ô gốc.
Theo caniuse.com , không có vấn đề tương thích đáng kể nào liên quan đến việc sử dụngtable-layout kể từ ngày 12 tháng 9 năm 2019.
Hoặc chỉ cần áp dụng widthcho các ô cụ thể như trong bảng thứ ba.
Các phương pháp này cho phép ô chứa nội dung không kích thước hiệu quả được tạo bằng cách áp dụng position: absolute để được cung cấp một số chu vi tùy ý.
Đơn giản hơn nhiều ...
Tôi thực sự nên nghĩ về điều này ngay từ đầu; chúng ta có thể thao tác nội dung ô trong bảng cấp độ khối theo tất cả các cách thông thường và không phá hủy hoàn toàn kích thước tự nhiên của nội dung position: absolute, chúng ta có thể rời khỏi bảng để tìm ra chiều rộng nên là bao nhiêu.
table {
width: 100%;
}
td {
border: 1px solid #999;
}
table p {
margin: 0;
}
.cap-height p {
max-height: 3em;
overflow: hidden;
}
<table><tbody>
<tr class="cap-height">
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
<td>Foo</td>
</tr>
<tr class="cap-height">
<td><p>Bar</p></td>
<td>Baz</td>
</tr>
<tr>
<td>Qux</td>
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
</tr>
</tbody></table>