设置表列宽度

Question

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

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

如何设置宽度，使“从”和“日期”为页面宽度的15％，“主题”为70％。我还希望表格占据整个页面宽度。

Answer 1

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

Answer 2

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分开，以减少代码重复，并分离关注点（HTML用于结构和语义，CSS用于表示）。

请注意，要在旧版Internet Explorer中使用此功能，您可能必须为表提供特定宽度（例如，900px）。如果浏览器的包装器没有精确的尺寸，那么浏览器在渲染具有百分比尺寸的元素时会遇到一些问题。

Answer 3

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

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

Answer 4

只有一个类的替代方式，同时将样式保存在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>

Answer 5

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

Answer 6

这是我的两个建议。

1. 使用课程。无需指定其他两列的宽度，因为它们将由浏览器自动设置为15％。

   ＆＃13;

   ＆＃13;

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

   ＆＃13;

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

   ＆＃13;

   ＆＃13;
   ＆＃13;

2. 不使用课程。三种不同的方法，但结果是相同的。

   A）

   ＆＃13;

   ＆＃13;

       table { table-layout: fixed; }
       th+th { width: 70%; }
       th+th+th { width: 15%; }

   ＆＃13;

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

   ＆＃13;

   ＆＃13;
   ＆＃13;

   b）中

   ＆＃13;

   ＆＃13;

       table { table-layout: fixed; }
       th:nth-of-type(2) { width: 70%; }

   ＆＃13;

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

   ＆＃13;

   ＆＃13;
   ＆＃13;
   c）这个是我最喜欢的。与b）相同，但浏览器支持更好。
   ＆＃13;

   ＆＃13;

       table { table-layout: fixed; }
       th:first-child+th { width: 70%; }

   ＆＃13;

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

   ＆＃13;

   ＆＃13;
   ＆＃13;

Answer 7

<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

Answer 8

不要使用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文件中。

Answer 9

试试这个。

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

Answer 10

这是另一种在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%;
}

Answer 11

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

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

Answer 12

在表格标签后添加colgroup。在此处定义宽度和列数。并添加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>

Answer 13

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