设定表格栏宽

202

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

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

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

html  css  html-table 
— alamodey
source

Answers:

319 

<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>
展开摘要

— 戈登·古斯塔夫森
source
5
喜欢这种解决方案的清洁度。但是，请关闭列，例如<col span =“ 1” style =“ width：15％;” />或<col span =“ 1” style =“ width：15％;”> </ col>
— lsu_guy 2013年
23
@Isu_guy您仅在使用XHTML时关闭<col> －在HTML中，<col>标记没有关闭... 更多信息，请参见链接。在HTML5中，<col>是一个void元素，表示不得关闭
— Matija Nalis
4
根据w3schools.com/tags/att_col_width.asp的 @Zulu “ HTML5不支持<col> width属性。
— Caltor
30
@Caltor：代码未使用<col> width attribute；它使用的是CSS *style* width，它替换了<col> width属性。（尽管有很多人对此评论投反对票！）
— ToolmakerSteve
4
span="1"是多余的，因为默认值为1。
— Madbreaks
128

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）。如果包装器没有确切的尺寸，则该浏览器在渲染具有百分比尺寸的元素时会遇到一些问题。

— 罗恩·德维拉
source
如果您在第一行中有colspans，此解决方案将失败
— mark1234
3
很好，因为<col width =“”>在HTML5中已过时：developer.mozilla.org/en/docs/Web/HTML/Element/col
— 理查德（Richard）
30

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

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}
— 皮特
source
实际上，您只需要指定两列的宽度。第三个将自动计算，因此table{table-layout:fixed};.from,.date{width:15%}就足够了。除非这些类也用于其他元素，否则写入th.from是多余的，可以缩短为just .from。
— tomasz86 '16
14

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

最近，您还可以使用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>
— 丹曼
source
所提出的:nth-child解决方案在性能方面是可怕的。在本示例中，只有三个元素（th或col）可以使用，因此没有充分的理由使用它（尤其是与通用选择器一起使用）。此外，您只需要th在第一行中将宽度设置为。第.mytable td一个示例中的是多余的。
— tomasz86 '16
“提出的：nth-​​child解决方案在性能方面太可怕了。” -需要引用。
— DanMan '16
这就足够了：有效地渲染CSS。使用通用选择器时，浏览器将首先检查所有元素是否是另一个元素的第n个子元素，然后检查它们的直接父元素是否是，然后检查它们tr是否属于.mytable。如果你真的想用“第n”，那么这样的事情可能会好很多：.mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};。在这种情况下，也无需指定第三列的宽度。
— tomasz86 '16
我个人将使用类或仅使用.mytable th+th{width: 70%}.mytable th+th+th{width:15%}。“第n个”选择器本身可能非常有用，但是在这种特殊情况下（一个只有3列的小表）并不是真正需要的。使用时，table-layout: fixed您甚至可以执行以下操作：table{table-layout:fixed}th:first-child+th{width:70%}。
— tomasz86 '16
我对此很清楚。但是这些文章是从几年前开始的，如今，CSS选择器存在更大的问题，例如大量的图像和JS代码。
— DanMan '16
8

这是我的两个建议。

  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>
    展开摘要

— tomasz86
source
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>

演示版

— 鲍里斯·格里（BorisGuéry）
source
5 

    table { table-layout: fixed; }
    .subject { width: 70%; }
    <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>
展开摘要

— 赫克托·戴维
source
4 
<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>

演示版

— Srinivas Erukulla
source
8
HTML5不支持col width属性。
— 符文2015年
4

试试这个吧。

<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>
— 米兰
source
3

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

— 艾蒂安·佩罗（Etienne Perot）
source
1
我会怀疑OP和有用的stackoverflowians发布的示例代码是出于可读性和简单性的考虑，绝不鼓励内联样式。
— 塔斯（Tass）
2

这是在CSS中执行此操作的另一种最小方法，即使在不支持此类:nth-child选择器的较旧浏览器中也可以使用CSS ：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%;
}
— DRD
source
2

在表格标签后添加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>
— 阿卜杜斯·萨拉姆·阿扎德（Abdus Salam Azad）
source
0 
style="column-width:300px;white-space: normal;"
— Wut Worawit
source
嗨-欢迎来到Stack Overflow。通常，带有文本的答案（而不只是代码）和一些解释被认为比仅代码的答案要好。由于该问题年龄较大，并且还有很多其他答案，因此它们可能会帮助您将来找到答案。
— jwheron
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.