我有一个简单的表格,用于收件箱如下:
<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%。我还想让表格占据整个页面宽度。
当前回答
取决于你的主体(或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
其他回答
表{ 宽度:100%; 边框:1px实心#000; } th.from th。{日期 宽度:15% } th。{主题 宽度:70%;/*不需要,因为只有70%的宽度保留*/ } <表> < thead > < tr > 从< < th类= "从" > / th > < th class = "主题" > < / th >主题 < th class = "日期" > < / th >日期 < / tr > < / thead > tbody > < < tr > (从)< td > < / td > (主题)< td > < / td > < td >[日期]< / td > < / tr > tbody > < / 表> < /
最佳实践是将HTML和CSS分开,以减少代码重复,并分离关注点(HTML用于结构和语义,CSS用于表示)。
请注意,为了在旧版本的Internet Explorer中工作,您可能必须给您的表一个特定的宽度(例如,900px)。如果该浏览器的包装器没有精确的尺寸,则该浏览器在呈现具有百分比尺寸的元素时会出现一些问题。
<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标签后添加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>
这里有另一种在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;"