我有一个用于收件箱一个简单的表如下:设置表格列宽
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
如何设置宽度,以便从和日期的页面宽度的15%和主题是70%。我也希望表格占用整个页面宽度。
我有一个用于收件箱一个简单的表如下:设置表格列宽
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
如何设置宽度,以便从和日期的页面宽度的15%和主题是70%。我也希望表格占用整个页面宽度。
HTML:
<table>
<thead>
<tr>
<th class="from">From</th>
<th class="subject">Subject</th>
<th class="date">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>[from]</td>
<td>[subject]</td>
<td>[date]</td>
</tr>
</tbody>
</table>
CSS:
table {
width: 100%;
border: 1px solid #000;
}
th.from, th.date {
width: 15%
}
th.subject {
width: 70%; /* Not necessary, since only 70% width remains */
}
最好的做法是让你的HTML和CSS分开了更少的代码复制,并为关注点分离(HTML的结构和语义,和用于演示的CSS)。
请注意,为了在较旧版本的Internet Explorer中工作,您可能必须为表格指定一个特定宽度(例如900px)。如果包装器没有精确的尺寸,那么该浏览器在渲染具有百分比尺寸的元素时会遇到一些问题。
<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>
很好:如果你有第一行 – 2012-10-31 14:52:37
取决于你的身体(或披着你的表格),你应该能够做到这一点的 '设置':
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>
不要使用边框属性,使用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,第一个声明将确保您的表粘在宽度您提供(你需要在你的HTML中添加类):
table{
table-layout:fixed;
}
th.from, th.date {
width: 15%;
}
th.subject{
width: 70%;
}
替代办法只有一个类,而保持在一个CSS文件,甚至工作在IE7您的样式:
<table class="mytable">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
<style>
.mytable td, .mytable th { width:15%; }
.mytable td + td, .mytable th + th { width:70%; }
.mytable td + td + td, .mytable th + th + th { width:15%; }
</style>
最近,您还可以使用来自CSS3(IE9 +)时,nth-child()
选择,你只希望把NR。而不是将它们与相邻的选择器串联在一起。像这样,例如:
<style>
.mytable tr > *:nth-child(1) { width:15%; }
.mytable tr > *:nth-child(2) { width:70%; }
.mytable tr > *:nth-child(3) { width:15%; }
</style>
试试这个。
<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>
这里做到这一点在CSS,即使在不支持:nth-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%;
}
<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>
这些是我的两个建议。
使用类。有没有必要指定两个其他列的宽度,因为他们将被浏览器自动设置为各15%。
table { table-layout: fixed; }
.subject { width: 70%; }
<table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table>
不使用类。三种不同的方法,但结果是相同的。
一)
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)这是我的最爱。与b)相同,但具有更好的浏览器支持。
table { table-layout: fixed; }
th:first-child+th { width: 70%; }
<table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
table { table-layout: fixed; }
.subject { width: 70%; }
<table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table>
使用COLGROUP如果你想样式一整列可能是更好的做法。 – Muhd 2011-12-01 22:51:11
1为完全获得宽度规范出HTML并进入CSS。 – Seth 2012-08-26 19:16:58
+1为关于旧版IE的好消息; “旧版本的Internet Explorer”。 https://developer.mozilla.org/en/docs/Web/HTML/Element/col – Samuel 2014-07-02 15:05:49