Html 设置表格列宽

Setting table column width

提问by alamodey

I've got a simple table that is used for an inbox as follows:

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

<table border="1">
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
        </tr>

How do I set the width so the From and Date are 15% of the page width and the Subject is 70%. I also want the table to take up the whole page width.

如何设置宽度，使 From 和 Date 为页面宽度的 15%，Subject 为 70%。我还希望表格占据整个页面宽度。

回答by Gordon Gustafson

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

回答by Ron DeVera

HTML:

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:

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 */
}

The best practice is to keep your HTML and CSS separate for less code duplication, and for separation of concerns (HTML for structure and semantics, and CSS for presentation).

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

Note that, for this to work in older versions of Internet Explorer, you may have to give your table a specific width (e.g., 900px). That browser has some problems rendering an element with percentage dimensions if its wrapper doesn't have exact dimensions.

请注意，要使其在旧版本的 Internet Explorer 中工作，您可能必须为您的表格指定特定的宽度（例如，900 像素）。如果它的包装器没有精确的尺寸，那么该浏览器在渲染具有百分比尺寸的元素时会出现一些问题。

回答by Pete

Use the CSS below, the first declaration will ensure your table sticks to the widths you provide (you'll need to add the classes in your HTML):

使用下面的 CSS，第一个声明将确保您的表格符合您提供的宽度（您需要在 HTML 中添加类）：

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}

回答by DanMan

Alternative way with just one class while keeping your styles in a CSS file, which even works in IE7:

仅使用一个类同时将样式保存在 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>

More recently, you can also use the nth-child()selector from CSS3 (IE9+), where you'd just put the nr. of the respective column into the parenthesis instead of stringing them together with the adjacent selector. Like this, for example:

最近，您还可以使用nth-child()CSS3 (IE9+) 中的选择器，您只需将 nr. 将相应列的名称放入括号中，而不是将它们与相邻的选择器串在一起。像这样，例如：

<style>
    .mytable tr > *:nth-child(1) { width:15%; }
    .mytable tr > *:nth-child(2) { width:70%; }
    .mytable tr > *:nth-child(3) { width:15%; }
</style>

回答by tomasz86

These are my two suggestions.

这是我的两个建议。

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

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

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

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

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

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>

回答by Boris Guéry

Depending on your body (or the div which is wrapping your table) 'settings' you should be able to do this:

根据您的身体（或包裹您的桌子的 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>

Demo

演示

回答by Milan

Try this instead.

试试这个。

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

回答by Hector David

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

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

回答by Srinivas Erukulla

<table>
  <col width="130">
  <col width="80">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>0</td>
  </tr>
  <tr>
    <td>February</td>
    <td></td>
  </tr>
</table>

Demo

演示

回答by Etienne Perot

Don't use the border attribute, use CSS for all your styling needs.

不要使用边框属性，使用 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>

But embedding CSS like that is poor practice - one should use CSS classes instead, and put the CSS rules in an external CSS file.

但是像这样嵌入 CSS 是一种糟糕的做法 - 应该使用 CSS 类来代替，并将 CSS 规则放在一个外部 CSS 文件中。