将td分成两部分
我正在尝试拆分TD（表格单元格），使其看起来好像是两个单元格。问题是，当细胞在高度上生长时，我无法使内部的两个div占据所有可用的高度。由于这些细胞可以动态生长，我也无法设置固定的高度（这可以解决问题）。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
td { border: 1px solid black; width: 50px; text-align: center; margin:0; padding:0 }
#span1 { background-color: #DDD; width: 25px; float: right; }
#span2 { background-color: #EEE; width: 24px; float: left; }
.t { border-top: 1px solid black; }
.r { border-right: 1px solid black; height: 100%; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td><td>2</td><td>3<div><div id="span1" class="t">1</div><div id="span2" class="t r">1</div></div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2 2 2 2 2 22 2 </td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2 2 2 2 2 2 2 2 </td><td><span style="line-height:2"><div id="span1">3</div><div id="span2" class="r">3</div></span></td><td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
这就是它的外观：
我不希望在第3栏中看到那些白色空白。
任何想法如何解决这个问题？ 到目前为止，我一直在与CSS争吵一段时间没有运气......
谢谢！
4 个答案:
答案 0 :(得分：12)
你应该设置高度td height = 100％，并且.span1 set height = 100％然后尝试这个你可以得到答案..
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
td { border: 1px solid black; width: 50px; text-align: center; margin:0; padding:0; height:100%; }
#span1 { background-color: #DDD; width: 25px; float: right; height:100%; }
#span2 { background-color: #EEE; width: 24px; float: left; }
.t { border-top: 1px solid black; }
.r { border-right: 1px solid black; height: 100%; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td><td>2</td><td>3<div><div id="span1" class="t">1</div><div id="span2" class="t r">1</div></div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2 2 2 2 2 22 2 </td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2 2 2 2 2 2 2 2 </td><td><span style="line-height:2"><div id="span1">3</div><div id="span2" class="r">3</div></span></td><td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
答案 1 :(得分：2)
尝试设置
display:inline-block
也可能需要也可能不需要增加100％的高度。
也有可能你不能简单地添加2个td而不是试图模仿2 ??
答案 2 :(得分：0)
你可以把一个表放在那个表格单元格中，然后你可以做任何你想做的内表，比如顶行的td colspan="2"和底行的td td（这让我想起了丑陋的日子表格布局，但无论什么适合你！）
答案 3 :(得分：0)
我也一直在寻找一种分割TD（表数据单元）的方法。在阅读了很多帖子后，经过几次尝试失败后，我终于破解了它。非常感谢所有之前发布过的人，因为我能够将这些点连接起来。
您需要记住两件事：影响标题行和结果数据行。我的意思是，使用'colspan'的顶行[影响标题行]中的单元格直接影响它们下面的行中的单元格[结果数据行]。因此，例如，如果我的结果行（第2行）必须包含拆分TD，那么它受上面的行的影响，该行在其TD（第1行）中使用“colspan”。但是如果下一行（第3行）必须不受第1行中'colspan'的影响，则下一行（第3行）中的单元格必须与第1行中的单元格具有相同的'colspan'属性，这可以防止它们被分裂并使它们“跨越”常规差距。
在图像[单击链接以查看图像]中，我只有2列[第2列和第4列]在它们下面拆分TD。在第一行中，我使用'colspan'来影响下面的行。但是，我不希望第2行和第3行分开，因此它们与第1行具有相同的“colspans”。我想要在第4行和第5行中分割单元格[当然只在第2和第4列]，所以为了实现这一点，它们不包含'colspan'属性，这使得它们受到使用'的上面的行的影响'合并单元格”。第6行不受前面行中'colspans'的影响，因为它包含与前3行相同的'colspan'属性。第7行和最后一行包含拆分TD，因为它与第4行和第5行一样，不包含“colspans”。这可能听起来令人困惑，但如果你看一下图像并尝试源代码，我想你会很高兴的。我希望这会有所帮助。
https://www.flickr.com/photos/12121792@N02/sets/72157651047314439/
<table border="1px solid" cellspacing="5" bordercolor="#000000" width="959" cellpadding="5">
<tr align="justify" valign="top">
<td valign="middle" bgcolor="#FFFFFF" width="210"><h4 style="color:#000000" align="center">Nothing Special Here</h4></td>
<td colspan="2" valign="middle" bgcolor="#6E7F8B"><h4 style="color:#FFFFFF" align="center">Colspan="2"</h4></td>
<td valign="middle" bgcolor="#6E7F8B" width="191"><h4 style="color:#FFFFFF" align="center">No Colspan Here</h4></td>
<td colspan="2" valign="middle" bgcolor="#6E7F8B"><h4 style="color:#FFFFFF" align="center">Colspan="2"</h4></td>
</tr>
<tr class="gray1" valign="top" align="justify">
<td valign="middle"><p align="justify">Nothing Special Here</p></td>
<td colspan="2" valign="middle"><p align="center">Colspan="2"</p></td>
<td width="191" valign="middle"><p align="center">No Colspan Here</p></td>
<td colspan="2" valign="middle"><p align="center">Colspan="2"</p></td>
</tr>
<tr class="gray1" valign="top" align="justify">
<td valign="middle"><p align="justify">Nothing Special Here</p></td>
<td colspan="2" valign="middle"><p align="center">Colspan="2"</p></td>
<td width="191" valign="middle"><p align="center">No Colspan Here</p></td>
<td colspan="2" valign="middle"><p align="center">Colspan="2"</p></td>
</tr>
<tr class="gray1" valign="top" align="justify">
<td valign="middle"><p align="justify">Nothing Special Here</p></td>
<td width="129" valign="middle"><p align="center">Nothing Special</p></td>
<td width="120" valign="middle"><p align="center">Nothing Special</p></td>
<td width="191" valign="middle"><p align="center">Nothing Special</p></td>
<td width="99" valign="middle"><p align="center">Nothing Special</p></td>
<td width="101" valign="middle"><p align="center">Nothing Special</p></td>
</tr>
<tr class="gray1" valign="top" align="justify">
<td valign="middle"><p align="justify">Nothing Special Here</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td width="101" valign="middle"><p align="center">Nothing Special</p></td>
</tr>
<tr class="gray1" valign="top" align="justify">
<td valign="middle"><p align="justify">Nothing Special Here</p></td>
<td colspan="2" valign="middle"><p align="center">Colspan="2"</p></td>
<td valign="middle"><p align="center">No Colspan Here</p></td>
<td colspan="2" valign="middle"><p align="center">Colspan="2"</p></td>
</tr>
<tr class="gray1" valign="top" align="justify">
<td valign="middle"><p align="justify">Nothing Special Here</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
</tr>
</table>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？