想做一个如上图所示的表格,主要是区域3、6、7如何显示,区域3和67共占了三行,就是相当于各跨1.5行,如何跨这1.5行?
我尝试了在td里嵌入一个table,table包含3/6/7区域效果如下:
如何将table3/6/7区域占满整个td区域?
首先。。。。。
说个题外话,你这种情况的结构在实际应用中,都会用div
来做的,没人用table
。所以你这问题也只存在于学术讨论
中。
那么咱们就来纠结一下用table
来做。
其实横向
没啥问题,问题就出在纵向
上呗?
如图,区域 2
和区域 3
的底边
必然不是同一条线,那么我有个想法不知道你有没有考虑过呢:
图中三条红线是看不见的。
意思就是:区域3
- rowspan="2"
区域5
- rowspan="2"
那这样的话区域4
- rowspan="3"
(当然,肯定是要设置列高的)
话说,题主所说的跨 1.5 行
在table
中是不成立的。
不过你这个想法可以放在用div
来实现上。
希望可以帮到你 :P
<table>
<tr>
<td colspan="5">1</td>
</tr>
<tr>
<td colspan="3">2</td>
<td colspan="2" rowspan="2">3</td>
</tr>
<tr>
<td rowspan="3">4</td>
<td colspan="2" rowspan="2">5</td>
</tr>
<tr>
<td rowspan="2">6</td>
<td rowspan="2">7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</table>
注意 取消 td 的 padding ,取消 table 3/6/7 的 margin
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
table{
/* border:solid red 1px;*/
border-collapse: collapse;
text-align: center;
}
td{
border:solid green 1px;
/* padding:5px;*/
}
</style>
</head>
<body>
<table cellpadding="0" border="1" width="200px" height="200px">
<caption>table title and/or explanatory text</caption>
<tr height="25%" width="100%">
<td colspan="5" >1</td>
</tr>
<tr>
<td colspan="3" >2</td>
<td colspan="2" rowspan="3" height="75%" width="40%" >
<table height="100%" width="100%" frame="void" >
<tr>
<td colspan="2" >3</td>
</tr>
<tr>
<td >6</td>
<td >7</td>
</tr>
</table>
</td>
</tr>
<tr>
<td rowspan="2" >4</td>
<td colspan="2" >5</td>
</tr>
<tr>
<td >8</td>
<td >9</td>
</tr>
</table>
</body>
</html>