设置表列宽度

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)。如果该浏览器的包装器没有精确的尺寸，则该浏览器在呈现具有百分比尺寸的元素时会出现一些问题。

取决于你的主体(或div包装你的表)'settings'你应该能够这样做:

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>

Demo

不要使用border属性，使用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%;
}

另一种方法是只使用一个类，同时将样式保存在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>

试试这个吧。

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

Demo

这是我的两点建议。

1. < p >使用类。不需要指定其他两列的宽度，因为浏览器会自动将它们设置为15%。
   .

       table { table-layout: fixed; }
   .subject { width: 70%; }

       <table>
   <tr>
   <th>From</th>
   <th class="subject">Subject</th>
   <th>Date</th>
   </tr>
   </table>

   李< / p > < / >

2. 不使用类。三种不同的方法，但结果是一样的。

   一)

   .

       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>

   李< / p > < / >

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>