Tôi đã có một bảng đơn giản được sử dụng cho hộp thư đến như sau:
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>Làm cách nào để tôi đặt chiều rộng sao cho Từ và Ngày bằng 15% chiều rộng của trang và Chủ đề là 70%. Tôi cũng muốn bảng chiếm toàn bộ chiều rộng của trang.
Câu trả lời:
<table style="width: 100%">
<colgroup>
<col span="1" style="width: 15%;">
<col span="1" style="width: 70%;">
<col span="1" style="width: 15%;">
</colgroup>
<!-- Put <thead>, <tbody>, and <tr>'s here! -->
<tbody>
<tr>
<td style="background-color: #777">15%</td>
<td style="background-color: #aaa">70%</td>
<td style="background-color: #777">15%</td>
</tr>
</tbody>
</table>width attribute; nó đang sử dụng a CSS *style* width, cái đã thay thế thuộc tính width <col>. (mặc dù có nhiều người bình chọn rằng bình luận đó !!)
span="1"là không cần thiết vì 1 là mặc định.
HTML:
<table>
<thead>
<tr>
<th class="from">From</th>
<th class="subject">Subject</th>
<th class="date">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>[from]</td>
<td>[subject]</td>
<td>[date]</td>
</tr>
</tbody>
</table>CSS:
table {
width: 100%;
border: 1px solid #000;
}
th.from, th.date {
width: 15%
}
th.subject {
width: 70%; /* Not necessary, since only 70% width remains */
}Cách thực hành tốt nhất là tách biệt HTML và CSS của bạn để sao chép ít mã hơn và tách biệt các mối quan tâm (HTML cho cấu trúc và ngữ nghĩa và CSS để trình bày).
Lưu ý rằng, để điều này hoạt động trong các phiên bản Internet Explorer cũ hơn, bạn có thể phải cung cấp cho bảng của mình một chiều rộng cụ thể (ví dụ: 900px). Trình duyệt đó có một số vấn đề khi hiển thị một phần tử có kích thước phần trăm nếu trình bao bọc của nó không có kích thước chính xác.
Sử dụng CSS bên dưới, khai báo đầu tiên sẽ đảm bảo bảng của bạn bám sát chiều rộng bạn cung cấp (bạn sẽ cần thêm các lớp trong HTML của mình):
table{
table-layout:fixed;
}
th.from, th.date {
width: 15%;
}
th.subject{
width: 70%;
}table{table-layout:fixed};.from,.date{width:15%}là đủ. Trừ khi các lớp được sử dụng trên các yếu tố khác nữa, viết th.fromlà dư thừa và có thể rút ngắn thành chỉ .from.
Cách khác chỉ với một lớp trong khi vẫn giữ kiểu của bạn trong tệp CSS, thậm chí hoạt động trong IE7:
<table class="mytable">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
<style>
.mytable td, .mytable th { width:15%; }
.mytable td + td, .mytable th + th { width:70%; }
.mytable td + td + td, .mytable th + th + th { width:15%; }
</style>Gần đây, bạn cũng có thể sử dụng nth-child()bộ chọn từ CSS3 (IE9 +), trong đó bạn chỉ cần đặt nr. của cột tương ứng vào dấu ngoặc đơn thay vì xâu chuỗi chúng cùng với bộ chọn liền kề. Như thế này, ví dụ:
<style>
.mytable tr > *:nth-child(1) { width:15%; }
.mytable tr > *:nth-child(2) { width:70%; }
.mytable tr > *:nth-child(3) { width:15%; }
</style>:nth-childgiải pháp đề xuất là khủng khiếp về hiệu suất. Không có lý do hợp lệ để sử dụng nó (đặc biệt là với bộ chọn phổ quát) trong ví dụ này khi chỉ có ba yếu tố ( thhoặc col) để tạo kiểu. Ngoài ra, bạn chỉ cần đặt chiều rộng cho thhàng đầu tiên. Trong .mytable tdví dụ đầu tiên là dư thừa.
trvà sau đó chúng có thuộc về chúng hay không .mytable. Nếu bạn thực sự muốn sử dụng "nth" thì một cái gì đó như thế này có lẽ sẽ tốt hơn nhiều : .mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};. Cũng không cần chỉ định chiều rộng cột thứ ba trong trường hợp này.
.mytable th+th{width: 70%}.mytable th+th+th{width:15%}. Bản thân các bộ chọn "thứ n" có thể rất hữu ích nhưng trong trường hợp cụ thể này (một bảng nhỏ chỉ có 3 cột) không thực sự cần thiết. Khi sử dụng, table-layout: fixedbạn thậm chí có thể làm điều này : table{table-layout:fixed}th:first-child+th{width:70%}.
Đây là hai gợi ý của tôi.
Sử dụng các lớp học. Không cần chỉ định chiều rộng của hai cột khác vì chúng sẽ được trình duyệt tự động đặt thành 15% mỗi cột.
table { table-layout: fixed; }
.subject { width: 70%; } <table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table>Không sử dụng các lớp học. Ba phương pháp khác nhau nhưng kết quả là giống hệt nhau.
a)
table { table-layout: fixed; }
th+th { width: 70%; }
th+th+th { width: 15%; } <table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>b)
table { table-layout: fixed; }
th:nth-of-type(2) { width: 70%; } <table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>c) Đây là yêu thích của tôi. Tương tự như b) nhưng với sự hỗ trợ trình duyệt tốt hơn.
table { table-layout: fixed; }
th:first-child+th { width: 70%; } <table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>Tùy thuộc vào cơ thể của bạn (hoặc div đang bao bọc bảng của bạn) 'cài đặt', bạn sẽ có thể thực hiện việc này:
body {
width: 98%;
}
table {
width: 100%;
}
th {
border: 1px solid black;
}
th.From, th.Date {
width: 15%;
}
th.Date {
width: 70%;
}
<table>
<thead>
<tr>
<th class="From">From</th>
<th class="Subject">Subject</th>
<th class="Date">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Me</td>
<td>Your question</td>
<td>5/30/2009 2:41:40 AM UTC</td>
</tr>
</tbody>
</table> table { table-layout: fixed; }
.subject { width: 70%; } <table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table><table>
<col width="130">
<col width="80">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>Hãy thử điều này thay thế.
<table style="width: 100%">
<tr>
<th style="width: 20%">
column 1
</th>
<th style="width: 40%">
column 2
</th>
<th style="width: 40%">
column 3
</th>
</tr>
<tr>
<td style="width: 20%">
value 1
</td>
<td style="width: 40%">
value 2
</td>
<td style="width: 40%">
value 3
</td>
</tr>
</table>Không sử dụng thuộc tính viền, sử dụng CSS cho tất cả các nhu cầu tạo kiểu của bạn.
<table style="border:1px; width:100%;">
<tr>
<th style="width:15%;">From</th>
<th style="width:70%;">Subject</th>
<th style="width:15%;">Date</th>
</tr>
... rest of the table code...
</table>Nhưng việc nhúng CSS như thế là thực tế kém - thay vào đó, người ta nên sử dụng các lớp CSS và đặt các quy tắc CSS vào một tệp CSS bên ngoài.
Đây là một cách tối thiểu khác để làm điều đó trong CSS, hoạt động ngay cả trong các trình duyệt cũ không hỗ trợ :nth-childvà các bộ chọn tương tự: http://jsfiddle.net/3wZWt/ .
HTML:
<table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
<tr>
<td>Dmitriy</td>
<td>Learning CSS</td>
<td>7/5/2014</td>
</tr>
</table>CSS:
table {
border-collapse: collapse;
width: 100%;
}
tr > * {
border: 1px solid #000;
}
tr > th + th {
width: 70%;
}
tr > th + th + th {
width: 15%;
}Thêm colgroup sau thẻ bảng của bạn. Xác định chiều rộng và số lượng cột ở đây. và thêm thẻ tbody. Đặt tr của bạn bên trong của tbody.
<table>
<colgroup>
<col span="1" style="width: 30%;">
<col span="1" style="width: 70%;">
</colgroup>
<tbody>
<tr>
<td>First column</td>
<td>Second column</td>
</tr>
</tbody>
</table>style="column-width:300px;white-space: normal;"