我有一个用于收件箱的简单表格，如下所示：
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
如何设置宽度，使 From 和 Date 为页面宽度的 15%，Subject 为 70%。我还希望表格占据整个页面宽度。
【问题讨论】：
标签： html css html-table
table {
width: 100%;
border: 1px solid #000;
}
th.from, th.date {
width: 15%
}
th.subject {
width: 70%; /* Not necessary, since only 70% width remains */
}<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>最佳做法是将HTML 和CSS 分开，以减少代码重复并分离关注点（HTML 用于结构和语义，CSS 用于演示）。
请注意，要在旧版本的 Internet Explorer 中使用此功能，您可能需要为表格指定特定宽度（例如 900 像素）。如果它的包装器没有精确的尺寸，该浏览器在渲染具有百分比尺寸的元素时会出现一些问题。
【讨论】：
<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;它使用CSS *style* width，它取代了 span="1" 是多余的，因为 1 是默认值。
根据您的身体（或包裹表格的 div）“设置”，您应该能够做到这一点：
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>
【讨论】：
不要使用边框属性，使用 CSS 来满足您的所有样式需求。
<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>
但是像这样嵌入 CSS 是一种不好的做法 - 应该使用 CSS 类，并将 CSS 规则放在外部 CSS 文件中。
【讨论】：
使用下面的 CSS，第一个声明将确保您的表格符合您提供的宽度（您需要在 HTML 中添加类）：
table{
table-layout:fixed;
}
th.from, th.date {
width: 15%;
}
th.subject{
width: 70%;
}
【讨论】：
table{table-layout:fixed};.from,.date{width:15%}就足够了。除非这些类也用于其他元素，否则写 th.from 是多余的，可以缩短为 .from。
table-layout: fixed 是一个真正的陷阱！这个答案真的应该更高。
仅使用一个类的替代方法，同时将样式保存在 CSS 文件中，甚至在 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>
最近，您还可以使用 CSS3 (IE9+) 中的 nth-child() 选择器，您只需将 nr.将相应列的名称放入括号中，而不是将它们与相邻的选择器串在一起。比如这样：
<style>
.mytable tr > *:nth-child(1) { width:15%; }
.mytable tr > *:nth-child(2) { width:70%; }
.mytable tr > *:nth-child(3) { width:15%; }
</style>
【讨论】：
:nth-child 解决方案在性能方面非常糟糕。在这个只有三个元素（th 或col）要设置样式的示例中，没有正当理由使用它（尤其是使用通用选择器）。此外，您只需将宽度设置为第一行中的th。第一个示例中的.mytable td 是多余的。
tr，然后它们是否属于 .mytable。如果你真的想使用“nth”，那么这样的东西可能会好得多：.mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};。在这种情况下也不需要指定第三列的宽度。
.mytable th+th{width: 70%}.mytable th+th+th{width:15%}。 “第 n 个”选择器本身可能非常有用，但在这种特殊情况下（只有 3 列的小表）并不真正需要。使用table-layout: fixed 时，您甚至可以这样做：table{table-layout:fixed}th:first-child+th{width:70%}。
试试这个吧。
<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>
【讨论】：
这是在 CSS 中执行此操作的另一种最小方法，即使在不支持 :nth-child 和类似选择器的旧浏览器中也可以使用：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%;
}
【讨论】：
<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>
【讨论】：
这是我的两个建议。
使用类。无需指定其他两列的宽度，因为它们将由浏览器自动设置为 15%。
table { table-layout: fixed; }
.subject { width: 70%; } <table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table>不使用类。三种不同的方法，但结果是一样的。
一）
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) 这个是我最喜欢的。与 b) 相同，但具有更好的浏览器支持。
table { table-layout: fixed; }
th:first-child+th { width: 70%; } <table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>【讨论】：
table { table-layout: fixed; }
.subject { width: 70%; } <table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table>【讨论】：
style="column-width:300px;white-space: normal;"
【讨论】：
在您的table 标记后添加colgroup。在此处定义width 和列数，并添加tbody 标签。将您的tr 放入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>
【讨论】：