Cách đặt độ rộng cột cố định trong bảng HTML

Question

element. This element is to be placed between the

Dãy khoảng trắng được giữ nguyên. Các dòng bị ngắt ở các ký tự dòng mới, tại br và khi cần thiết để điền vào các ô dòng

Nội dung chính Show

Nếu bạn muốn sử dụng .text-nowrap, bạn phải sử dụng trình bao bọc div với lớp .table-responsive vì bảng của bạn sẽ bị hỏng trên màn hình nhỏ

Ví dụ đây là bảng có lớp text-nowrap

#TênHọQuốc giaThành phốVị tríTuổi1KateMossUSA / Vương quốc Anh / Trung Quốc / NgaThành phố New York / Warsaw / Lodz / Amsterdam / London / ChicagoNhà thiết kế web /Nhà thiết kế UX / Nhà thiết kế Ul / Nhà phát triển JavaScript232AnnaWintourUSA / Vương quốc Anh / Trung Quốc / NgaThành phố New York / Warsaw / Lodz / Amsterdam / London

Bây giờ bạn đã sử dụng tất cả các ngữ nghĩa phù hợp, bạn có thể muốn thay đổi độ rộng của mỗi cột – tính đến thời điểm hiện tại, mỗi cột rộng 33%. Giả sử chúng ta muốn cột đầu tiên chiếm 40% của bảng và hai cột còn lại là 30% (như 40% + 30% +30% = 100%)

In order to do this, we use the

tag and the tag and we use the style attribute to define the width of the columns. The element is a self-closing element and you need one for every columns of you table. Let’s have an example:

<table border="1" width="100%">
	<col style="width:40%">
	<col style="width:30%">
	<col style="width:30%">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>
		<th>Vitamin C</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th>Apples</th>
		<td>98 ui</td>
		<td>8.4 mg</td>
	</tr>
	<tr>
		<th>Oranges</th>
		<td>295 ui</td>
		<td>69.7 mg</td>
	</tr>
	<tr>
		<th>Bananas</th>
		<td>76 ui</td>
		<td>10.3 mg</td>
	</tr>
	</tbody>
</table>

Bằng cách này, bạn có thể kiểm soát độ rộng của các cột trong bảng. Tôi đã sử dụng thuộc tính kiểu dáng và giá trị "chiều rộng. 40%" làm ví dụ, nhưng lý tưởng nhất là bạn nên có cái này trong tệp biểu định kiểu của mình, vì cái này liên quan đến ngoại hình chứ không liên quan gì đến ngữ nghĩa

Tôi đã sử dụng biểu định kiểu của mình, bạn có thể tạo ba lớp trong đó bạn đã xác định chiều rộng của mỗi cột và sau đó đánh dấu của bạn sẽ trông giống như thế này

Theo mặc định, hầu hết các trình duyệt đều sử dụng thuật toán bố cục bảng tự động. Độ rộng của bảng và các ô của nó được điều chỉnh để phù hợp với nội dung

fixed

Chiều rộng của bảng và cột được đặt theo chiều rộng của các phần tử table và col hoặc theo chiều rộng của hàng ô đầu tiên. Các ô ở các hàng tiếp theo không ảnh hưởng đến độ rộng của cột

Theo phương pháp bố cục "cố định", toàn bộ bảng có thể được hiển thị sau khi hàng đầu tiên của bảng được tải xuống và phân tích. Điều này có thể tăng tốc thời gian kết xuất so với phương pháp bố cục "tự động", nhưng nội dung ô tiếp theo có thể không vừa với độ rộng cột được cung cấp. Các ô sử dụng thuộc tính

table-layout = 
  auto   |
  fixed

0 để xác định xem có cắt bất kỳ nội dung tràn nào hay không, nhưng chỉ khi bảng có chiều rộng đã biết;

Giá trị ban đầuautoÁp dụng cho các phần tửtable và

table-layout = 
  auto   |
  fixed

3Không kế thừaKhông có giá trị tính toán như đã chỉ địnhLoại hoạt ảnhrời rạc

table-layout = 
  auto   |
  fixed

Ví dụ này sử dụng bố cục bảng cố định, kết hợp với thuộc tính

table-layout = 
  auto   |
  fixed

4, để hạn chế chiều rộng của bảng. Thuộc tính

table-layout = 
  auto   |
  fixed

5 được sử dụng để áp dụng dấu chấm lửng cho những từ quá dài để phù hợp. Nếu cách bố trí bảng là auto, thì bảng sẽ phát triển để phù hợp với nội dung của nó, mặc dù đã chỉ định