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

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

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


当前回答

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

其他回答

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

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

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

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

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