表{ 宽度:100%; 边框:1px实心#000; ｝ th.from th。{日期 宽度:15% ｝ th。{主题 宽度:70%;/*不需要，因为只有70%的宽度保留*/ ｝ <表> < thead > < tr > 从< < th类= "从" > / th > < th class = "主题" > < / th >主题 < th class = "日期" > < / th >日期 < / tr > < / thead > tbody > < < tr > (从)< td > < / td > (主题)< td > < / td > < td >[日期]< / td > < / tr > tbody > < / 表> < /

最佳实践是将HTML和CSS分开，以减少代码重复，并分离关注点(HTML用于结构和语义，CSS用于表示)。

请注意，为了在旧版本的Internet Explorer中工作，您可能必须给您的表一个特定的宽度(例如，900px)。如果该浏览器的包装器没有精确的尺寸，则该浏览器在呈现具有百分比尺寸的元素时会出现一些问题。

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

取决于你的主体(或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+)中的n -child()选择器，在那里您只需将各自列的nn .放入括号中，而不是将它们与相邻选择器串在一起。比如这样:

<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中实现它的最小方法，即使在不支持的旧浏览器中也能工作:n -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

这是我的两点建议。

Using classes. There is no need to specify width of the two other columns as they will be set to 15% each automatically by the browser. table { table-layout: fixed; } .subject { width: 70%; } <table> <tr> <th>From</th> <th class="subject">Subject</th> <th>Date</th> </tr> </table> Without using classes. Three different methods but the result is identical. a) 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) This one is my favourite. Same as b) but with better browser support. 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{宽度:70%;｝ <表> < tr > 从< / th < th > > < th class = "主题" > < / th >主题 < th > < / th >日期 < / tr > 表> < /

style="column-width:300px;white-space: normal;"

在table标签后添加colgroup。在这里定义列的宽度和数量，并添加tbody标记。把你的tr放进身体里。

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