Html 垂直拆分表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3098390/
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 a table cell vertically
提问by Andy Jacobs
I've got an HTML table, where some cells have dynamic content that will change height over time. Let's say I want to have one cell fill the bottom half with one color and the top half with another color. I'd like to do it with HTML/CSS such that as the other cells change height, the color cell will adjust to still be half-and-half (i.e., each color takes half of the new height).
我有一个 HTML 表格，其中一些单元格的动态内容会随着时间的推移而改变高度。假设我想让一个单元格用一种颜色填充下半部分，用另一种颜色填充上半部分。我想用 HTML/CSS 来做，这样当其他单元格改变高度时，颜色单元格将调整为仍然是一半和一半（即，每种颜色占用新高度的一半）。
I've tried variations of the following code. If both heights are 50% then I only see two colored dots. If both heights are 50px then A) I don't think it will adjust, and B) It's too tall for the current neighbor.
我尝试了以下代码的变体。如果两个高度都是 50%，那么我只能看到两个彩色点。如果两个高度都是 50 像素，那么 A）我认为它不会调整，并且 B）它对于当前邻居来说太高了。
<table border="1">
<tr>
<td>1<br />2</td>
<td>
<table border="1">
<tr>
<td style="background-color: Blue; height: 50%" />
</tr>
<tr>
<td style="background-color: Red; height: 50px" />
</tr>
</table>
</td>
</tr>
</table>
Is there an easy trick to do this? Note that my final solution only needs to have a 1px vertical line, of half the cell height - so I could use a border, or background color, or even create a graphic if it would help. Oh, and I'm targeting multiple browsers.
有没有简单的技巧可以做到这一点？请注意，我的最终解决方案只需要一条 1px 垂直线，单元格高度的一半 - 因此我可以使用边框或背景颜色，甚至可以创建图形（如果有帮助）。哦，我的目标是多个浏览器。
回答by Shunter1112
I think you need to decide parent table size to separete half like this.
我认为你需要决定父表的大小来像这样分开一半。
<table border="1" style="height:100px">
<tr>
<td rowspan="2">1<br />2</td>
<td style="background-color: Blue; height: 50%" />
</tr>
<tr>
<td style="background-color: Red; height: 50%" />
</tr>
</table>
回答by Brock Adams
You can use all kinds of extra spaghetti markup or you can add one class to your table, like so:
您可以使用各种额外的意大利面条标记，也可以向表中添加一个类，如下所示：
<table class="FunkifyMyBackgounds">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
and use some very simple jQuery javascript:
并使用一些非常简单的 jQuery javascript：
<script type="text/javascript">
function SetAllSpecialCellBackgrounds (bNeedToCreateStructure) {
var zCellsToBackgroundify = $(".FunkifyMyBackgounds td");
//--- Set each cell's funky background.
zCellsToBackgroundify.each (function (idx) {
SetA_SpecialCellBackground ($(this), idx, bNeedToCreateStructure);
} );
}
function SetA_SpecialCellBackground (zJnode, K, bNeedToCreateStructure) {
if (bNeedToCreateStructure) {
//--- Add our special background structure.
var sIdName = 'idSpecialCellBG_Container' + K;
zJnode.append (
'<div id="' + sIdName + '" class="SplitCellBackground">'
+ '<div class="TopOfCell"> <\/div><div class="BottomOfCell">'
+ ' <\/div><\/div>'
);
}
ResizeA_SpecialCellBackground (zJnode);
}
function ResizeA_SpecialCellBackground (zJnode) {
var zCellBG_Frame = zJnode.find ('div.SplitCellBackground');
//--- Set the background container to match the cell dimensions.
zCellBG_Frame[0].style.width = zJnode.outerWidth (false) + 'px';
zCellBG_Frame[0].style.height = zJnode.outerHeight (false) + 'px';
//--- Position absolutely; Adjust for margin, if needed.
var aContentPos = zJnode.offset ();
//--- Redundant for IE. Tested and IE really seems to need it.
zCellBG_Frame[0].style.top = aContentPos.top + 'px';
zCellBG_Frame[0].style.left = aContentPos.left + 'px';
zCellBG_Frame.offset (aContentPos);
}
$(document).ready ( function () {
SetAllSpecialCellBackgrounds (true);
/*--- Globally catch table cell resizes caused by the browser window
change.
A cross-browser, good-enough solution is just to use a timer.
Keep it just under a second per usability guidelines.
*/
$(window).resize (function() {SetAllSpecialCellBackgrounds (false);} );
setInterval (function() {SetAllSpecialCellBackgrounds (false);}, 444);
} );
</script>
Required CSS:
所需的 CSS：
/***** Start of split-cell, specific styles. ****
*/
.SplitCellBackground, .TopOfCell, .BottomOfCell {
margin: 0;
padding: 0;
width: 100%;
height: 50%;
z-index: -10;
}
.SplitCellBackground {
position: absolute;
width: 10em;
height: 10em;
}
.TopOfCell {
background: #33FF33;
}
.BottomOfCell {
background: #FF33FF;
}
/***** End of split-cell, specific styles. *****/
You can see the complete code, in action at jsBin.
您可以在jsBin 中看到完整的代码。
It works with all major browsers but not IE6.
它适用于所有主要浏览器，但不适用于 IE6。
回答by Mawg says reinstate Monica
Why not uses straighforward HTML and the <rowspan>keyword? That seems to me to be the simplest approach.
为什么不使用简单的 HTML 和<rowspan>关键字？在我看来，这是最简单的方法。
Use <TD ROWSPAN="2">for the cell that you want to split. You can then use standard HTML / CSS colouring on those two cells? Since each is just a standard table cell, you can change their borders, etc
使用<TD ROWSPAN="2">为您要拆分单元格。然后您可以在这两个单元格上使用标准的 HTML/CSS 着色吗？由于每个都只是一个标准的表格单元格，您可以更改它们的边框等
There is an example at http://www.tedmontgomery.com/tutorial/tblxmpls.html
回答by Alerty
I believe you are having difficulty because you are mixing structure and layout. You should use CSS for layout. You should drop the inner table and use some divs.
我相信你有困难，因为你正在混合结构和布局。您应该使用 CSS 进行布局。您应该删除内部表并使用一些 div。
I recommend that you create a html document and copy/paste the code of the following examples from the code sample. For the moment, I do not have IE so I was not able to test the sample with that browser.
我建议您创建一个 html 文档并从代码示例中复制/粘贴以下示例的代码。目前，我没有 IE，所以我无法使用该浏览器测试示例。
Here is the code sample :
这是代码示例：
.html
.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
body, html
{
margin:0;
padding:0;
color:#000;
background: #333;
}
h2
{
color: #FFF;
font-weight: bold;
}
p
{
font-size: 16px;
color: #FFF;
}
#example1
{
position: relative;
margin: 0 auto;
background: #06F;
width: 600px;
min-height: 550px;
height: auto;
padding: 10px;
margin-bottom: 10px;
overflow: auto;
}
#example2
{
position: relative;
margin: 0 auto;
background: #06F;
width: 600px;
min-height: 550px;
height: auto;
padding: 10px;
overflow: auto;
}
#table1 td
{
height: 400px;
display: block;
float: left;
width: 250px;
}
.content
{
position: relative;
margin: 0 auto;
}
.table1
{
width: auto;
}
.column
{
position: relative;
height: 400px;
width: 250px;
float: left;
margin-left: 2px;
}
.cell
{
position: relative;
height: 100%;
border:solid 1px #F00;
}
.top_cell
{
position: relative;
height: 50%;
padding: 5px;
background: #0FF;
overflow: auto;
}
.bottom_cell
{
position: relative;
height: 50%;
padding: 5px;
background: #C9F;
overflow: auto;
}
</style>
</head>
<body>
<div class="content">
<div id="example1">
<h2> Example 1: </h2>
<p>
This example is made only with CSS...
</p>
<div class="table1">
<div class="column">
<div class="cell">
<div class="top_cell">
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
</div>
<div class="bottom_cell">
<p>Test 1 Bottom</p>
<p>Test 1 Bottom</p>
<p>Test 1 Bottom</p>
<p>Test 1 Bottom</p>
<p>Test 1 Bottom</p>
</div>
</div>
</div>
<div class="column">
<div class="cell">
<div class="top_cell">
<p>Test 2 Top</p>
<p>Test 2 Top</p>
<p>Test 2 Top</p>
<p>Test 2 Top</p>
<p>Test 2 Top</p>
<p>Test 2 Top</p>
<p>Test 2 Top</p>
<p>Test 2 Top</p>
</div>
<div class="bottom_cell">
<p>Test 2 Bottom</p>
<p>Test 2 Bottom</p>
<p>Test 2 Bottom</p>
<p>Test 2 Bottom</p>
<p>Test 2 Bottom</p>
</div>
</div>
</div>
</div>
</div>
<div id="example2">
<h2> Example 2: </h2>
<p>
This example is made with a HTML table and some CSS...
</p>
<table id="table1">
<tr>
<td>
<div class="cell">
<div class="top_cell">
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
<p>Test 1 Top</p>
</div>
<div class="bottom_cell">
<p>Test 1 Bottom</p>
<p>Test 1 Bottom</p>
<p>Test 1 Bottom</p>
<p>Test 1 Bottom</p>
<p>Test 1 Bottom</p>
<p>Test 1 Bottom</p>
<p>Test 1 Bottom</p>
<p>Test 1 Bottom</p>
</div>
</div>
</td>
<td>
<div class="cell">
<div class="top_cell">
<p>Test 2 Top</p>
<p>Test 2 Top</p>
<p>Test 2 Top</p>
<p>Test 2 Top</p>
</div>
<div class="bottom_cell">
<p>Test 2 Bottom</p>
<p>Test 2 Bottom</p>
<p>Test 2 Bottom</p>
<p>Test 2 Bottom</p>
<p>Test 2 Bottom</p>
<p>Test 2 Bottom</p>
<p>Test 2 Bottom</p>
<p>Test 2 Bottom</p>
<p>Test 2 Bottom</p>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Tested on Safari 5 and Firefox 3 on Mac OS X (Snow Leopard).
在 Mac OS X (Snow Leopard) 上的 Safari 5 和 Firefox 3 上测试。
回答by abelito
I re-read the question and realized I made a big mistake in implementing my answer. I would suggest using a divs like Andy says, but I stand by using javascript and css. I do not see an obvious method to implement dynamic heights to divs or tables without assigning ids and manipulating heights that are generated and returned by the browser. Divs and tables operate in that fashion for some reason.
我重新阅读了这个问题，并意识到我在实施我的答案时犯了一个大错误。我建议使用像 Andy 所说的 div，但我坚持使用 javascript 和 css。我没有看到一种明显的方法来实现 div 或表格的动态高度，而不分配 id 和操作由浏览器生成和返回的高度。出于某种原因，div 和 table 以这种方式运行。
<script type="text/javascript">
/* FUNCTION: resizeTable
* DESCRIPTION: Resizes table_id so that it is twice the height of the larger
cell. The objective is to have two equally tall rows.
* EXAMPLE: <body onload="resizeTable();">
*/
function resizeTable() {
// get the dom elements of the table and cells
var table = document.getElementById("table");
var cell = document.getElementById("cell");
var diva = document.getElementById("div1");
var div4 = document.getElementById("div2");
// determine margin
var margin = ( table.offsetHeight - cell.offsetHeight );
// set the div's height to 1 larger than the cells to ensure it is full
diva.style.height = ( ( cell.offsetHeight - ( margin / 2 ) ) / 2 ) + "px";
div4.style.height = ( ( cell.offsetHeight - ( margin / 2 ) ) / 2 + 1 ) + "px";
}
// add onload event
window.onload = function() { resizeTable(); }
</script>
<table id="table" border="1" style="border-collapse: collapse;">
<tr>
<td id="cell">1<br />2a<br />a</font></td>
<td style="padding: 0px;">
<div id="div1" style="width: 5px; background: blue;">
</div>
<div id="div2" style="width: 5px; background: red;">
</div>
</td>
</tr>
</table>
