设置表列宽
设置表列宽
提问于 2009-05-30 10:41:40
我有一个用于收件箱的简单表格，如下所示：
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>如何设置宽度，使From和Date为页面宽度的15%，主题为70%。我还希望表格占据整个页面宽度。
回答 12
Stack Overflow用户
回答已采纳
发布于 2009-05-30 02:48:23
<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>
Stack Overflow用户
发布于 2009-05-30 02:47:20
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中使用此功能，您可能必须为表格指定特定的宽度(例如，900px)。如果元素的包装器没有确切的尺寸，则该浏览器在呈现具有百分比尺寸的元素时会出现问题。
Stack Overflow用户
发布于 2011-06-14 21:40:44
使用下面的CSS，第一个声明将确保您的表保持您提供的宽度(您需要在HTML中添加类)：
table{
table-layout:fixed;
}
th.from, th.date {
width: 15%;
}
th.subject{
width: 70%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/928849
复制相关文章
相似问题