设置表格的列宽
我有一个用于收件箱的简单表格，如下所示：
<table border="1"> <tr> <th>From</th> <th>Subject</th> <th>Date</th> </tr> 如何设置宽度，使“起始date”为页面宽度的15％，“主题”为70％。 我也希望表格占用整个页面的宽度。
<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>
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 */ }
最好的做法是保持您的HTML和CSS分离，以减less重复代码，并分离关注点（HTML用于结构和语义，CSS用于表示）。
请注意，为了在较旧版本的Internet Explorer中工作，您可能必须为表格指定一个特定的宽度（例如900px）。 如果包装器没有确切的尺寸，那么浏览器在渲染具有百分比尺寸的元素时会遇到一些问题。
使用下面的CSS，第一个声明将确保您的表格保持您提供的宽度（您需要在HTML中添加类）：
table{ table-layout:fixed; } th.from, th.date { width: 15%; } th.subject{ width: 70%; }
只有一个类的替代方法，同时保持您的样式在一个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()select器，你只需要放置nr。 而不是将它们与相邻的select器串联在一起。 像这样，例如：
<style> .mytable tr > *:nth-child(1) { width:15%; } .mytable tr > *:nth-child(2) { width:70%; } .mytable tr > *:nth-child(3) { width:15%; } </style>
这是我的两个build议。
-
使用类。 没有必要指定其他两列的宽度，因为它们将被浏览器自动设置为15％。
table { table-layout: fixed; } .subject { width: 70%; }<table> <tr> <th>From</th> <th class="subject">Subject</th> <th>Date</th> </tr> </table>
根据你的身体（或包装你的桌子的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>
演示
<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>
演示
不要使用边框属性，使用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>
但是像这样embeddedCSS是一个糟糕的做法 – 应该使用CSS类，而将CSS规则放在外部CSS文件中。
这里有另一个最简单的方法来做到这一点，即使在不支持的旧版浏览器:nth-child之类的select器： 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 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>
table { table-layout: fixed; } .subject { width: 70%; }
<table> <tr> <th>From</th> <th class="subject">Subject</th> <th>Date</th> </tr> </table>
