设置表列宽度

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

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

我如何设置宽度，使日期和日期是页面宽度的15%，主题是70%。我还想让表格占据整个页面宽度。

当前回答

取决于你的主体(或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

2009-05-30 02:49:08

其他回答

2009-05-30 02:48:23

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

2019-03-07 06:24:32

这是我的两点建议。

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>

2016-04-26 02:14:11

Table {Table -layout: fixed;｝ .subject{宽度:70%;｝ <表> < tr > 从< / th < th > > < th class = "主题" > < / th >主题 < th > < / th >日期 < / tr > 表> < /

2016-08-24 02:46:51

取决于你的主体(或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

2009-05-30 02:49:08

设置表列宽度

推荐文章

最新文章

标签