设置表格的列宽

我有一个用于收件箱的简单表格,如下所示:

<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议。

  1. 使用类。 没有必要指定其他两列的宽度,因为它们将被浏览器自动设置为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>