Html 将 td 一分为二
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10285819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Split td in two
提问by Matías
I'm trying to split a TD (table cell) to look as if it were two cells. The problem is that when the cell grows in Height, I cannot make the two divs inside to occupy all the available height. As these cells can grow dynamically I cannot set a fixed height either (that could solve the issue).
我正在尝试拆分 TD（表格单元格）以使其看起来像是两个单元格。问题是当单元格在 Height 中增长时，我无法让里面的两个 div 占据所有可用的高度。由于这些单元格可以动态增长，我也无法设置固定高度（这可以解决问题）。
Here's my code:
这是我的代码：
<!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>
This is how it looks:
这是它的外观：
I don't want to see those white gaps in column 3.
我不想在第 3 列中看到那些白色间隙。
Any ideas how to solve this? I've been fightting with CSS for a while with no luck so far ...
任何想法如何解决这个问题？到目前为止，我一直在与 CSS 斗争，但没有运气......
Thanks!.
谢谢！。
回答by ram
you should be set the height td height=100%, and .span1 set height=100% then try to this you can get the answer..
你应该设置高度 td height=100%, and .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>
回答by Simon McLoughlin
Try setting
尝试设置
display:inline-block
may or may not also need to add height 100% as well.
可能也可能不需要添加高度 100%。
Also is there no way you could simply add 2 td's rather than trying to mimic 2??
还有没有办法可以简单地添加2个td而不是试图模仿2个？？
回答by Rodolfo
you can put a table inside that table cell, then that inner table you can do whatever you want, like td colspan="2"for the top row, and td td for the bottom row (this reminds me of the ugly days of table layout, but whatever works for you!)
你可以在那个表格单元格里面放一个表格，然后那个内部表格你可以做任何你想做的事情，比如td colspan="2"顶行，以及底行的 td td（这让我想起了表格布局的丑陋日子，但任何适用的你！）
回答by Xylon Draganthus
I also have been searching for a way to split a TD (Table Data Cell). After reading many posts and after several failed attempts, I finally have cracked it. Many thanks to all who have posted previously, as it is to your credit that I was able to connect the dots.
我也一直在寻找一种拆分 TD（表格数据单元格）的方法。看了很多帖子，几次尝试都失败了，终于破解了。非常感谢之前发布过的所有人，因为我能够将这些点联系起来，这是您的功劳。
There are two things you need to have in mind, Affecting Header Row, and Resulting Data Row. What I mean by this is that the cells in the top row [Affecting Header Row] that use 'colspan' directly effect the cells in the row beneath them [Resulting Data Row]. So for example, If my resulting row (2nd Row) must contain split TDs, then it is affected by the row above which uses 'colspan' in its TDs (1st Row). But if the following row (3rd Row) must be unaffected by the 'colspan' from the 1st Row, the cells in the following row (3rd Row) must have the same 'colspan' attributes as the cells in the 1st Row, this prevents them from being split and makes them 'span' the regular gap.
您需要记住两件事，影响标题行和结果数据行。我的意思是，使用“colspan”的顶行 [影响标题行] 中的单元格直接影响它们下方行中的单元格 [结果数据行]。因此，例如，如果我的结果行（第 2 行）必须包含拆分的 TD，那么它会受到上面在其 TD（第一行）中使用“colspan”的行的影响。但是，如果下一行（第 3 行）必须不受第 1 行的“colspan”影响，则下一行（第 3 行）中的单元格必须与第 1 行中的单元格具有相同的“colspan”属性，这可以防止它们不被分裂并使它们“跨越”常规间隙。
In the image [click the link to see image], I have only 2 columns [2nd and 4th columns] that are splitting TDs beneath them. In the 1st row I use 'colspan' to affect the rows below. However, I don't want the 2nd and 3rd rows split, so they have the same 'colspans' as the 1st row. I DO want to split cells in the 4th and 5th rows [in the 2nd and 4th columns only of course], so to accomplish this, they contain no 'colspan' attributes, which makes them affected by the rows above them which do use 'colspan'. The 6th row is unaffected by the 'colspans' from the previous rows, because it contains the same 'colspan' attributes as the first 3 rows. The 7th and final row contains split TDs because it, like rows 4 and 5, contains no 'colspans'. This may sound confusing, but if you look at the image and try the source code, I think you will be very pleased. I hope this helps.
在图像 [单击链接查看图像] 中，我只有 2 列 [第 2 和第 4 列] 在它们下方拆分 TD。在第一行中，我使用“colspan”来影响下面的行。但是，我不希望第 2 行和第 3 行分开，因此它们与第 1 行具有相同的“colspan”。我确实想拆分第 4 行和第 5 行中的单元格 [当然仅在第 2 列和第 4 列]，因此为了实现这一点，它们不包含“colspan”属性，这使它们受到它们上方使用 ' 的行的影响科尔斯潘'。第 6 行不受前一行的 'colspans' 影响，因为它包含与前 3 行相同的 'colspan' 属性。第 7 行也是最后一行包含拆分的 TD，因为它与第 4 行和第 5 行一样，不包含“colspan”。这听起来可能令人困惑，但是，如果您查看图像并尝试源代码，我想您会非常高兴。我希望这有帮助。
https://www.flickr.com/photos/12121792@N02/sets/72157651047314439/
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>
