可能重复:
表格单元格宽度问题
我有一张桌子设置为
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
</body>
</html>
如何让2行具有不同的单元格宽度？
Tok*_*bia 30
一种解决方案是将表格分成20列,每列5%,然后在每个实列上使用colspan以获得所需的宽度,如下所示:
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
</colgroup>
<tr>
<td colspan=5>25</td>
<td colspan=10>50</td>
<td colspan=5>25</td>
</tr>
<tr>
<td colspan=10>50</td>
<td colspan=6>30</td>
<td colspan=4>20</td>
</tr>
</table>
</body>
</html>Til*_*ill 20
据我所知,这是不可能的,这是有道理的,因为你要做的是反对表格数据表示的想法.但是,您可以将数据放在多个表中,并删除它们之间的任何填充和边距,以实现相同的结果,至少是可见的.有点像:
<html>
<head>
<style type="text/css">
.mytable {
border-collapse: collapse;
width: 100%;
background-color: white;
}
.mytable-head {
border: 1px solid black;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-head td {
border: 1px solid black;
}
.mytable-body {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-body td {
border: 1px solid black;
border-top: 0;
}
.mytable-footer {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.mytable-footer td {
border: 1px solid black;
border-top: 0;
}
</style>
</head>
<body>
<table class="mytable mytable-head">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="16%">16</td>
<td width="68%">68</td>
<td width="16%">16</td>
</tr>
</table>
<table class="mytable mytable-footer">
<tr>
<td width="20%">20</td>
<td width="30%">30</td>
<td width="50%">50</td>
</tr>
</table>
</body>
</html>我不知道你的要求,但我确信这是一个更优雅的解决方案.
您不能拥有任意宽度的单元格,这通常是来自任何空间的表格的标准行为,例如Excel,否则它不再是表格而是文本列表.
但是,您可以让单元格跨越多个列,例如:
<table>
<tr>
<td>25</td>
<td>50</td>
<td>25</td>
</tr>
<tr>
<td colspan="2">75</td>
<td>20</td>
</tr>
</table>
顺便说一句,你应该避免使用类似的样式属性border,bgcolor并且更喜欢那些CSS.
有5列colspan,这是可能的(点击这里)(但对我来说没有多大意义):
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="5%">
<col width="20%">
</colgroup>
<tr>
<td>25</td>
<td colspan="2">50</td>
<td colspan="2">25</td>
</tr>
<tr>
<td colspan="2">50</td>
<td colspan="2">30</td>
<td>20</td>
</tr>
</table>