我有一个简单的表格，用于收件箱如下:
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
我如何设置宽度，使日期和日期是页面宽度的15%，主题是70%。我还想让表格占据整个页面宽度。
当前回答
style="column-width:300px;white-space: normal;"
其他回答
<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
这是我的两点建议。
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>
在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>
取决于你的主体(或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%">
<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>
