我有一个简单的表格,用于收件箱如下:
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
我如何设置宽度,使日期和日期是页面宽度的15%,主题是70%。我还想让表格占据整个页面宽度。
我有一个简单的表格,用于收件箱如下:
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
我如何设置宽度,使日期和日期是页面宽度的15%,主题是70%。我还想让表格占据整个页面宽度。
当前回答
试试这个吧。
<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>
其他回答
<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
Table {Table -layout: fixed;} .subject{宽度:70%;} <表> < tr > 从< / th < th > > < th class = "主题" > < / th >主题 < th > < / th >日期 < / tr > 表> < /
不要使用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文件中。
这里有另一种在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%;
}
这是我的两点建议。
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>