我有一个HTML表格，其中一些单元格的动态内容会随着时间的推移而改变高度。假设我想让一个单元格用一种颜色填充下半部分，而上半部分用另一种颜色填充。我想用HTML / CSS做这样的事情，当其他单元改变高度时，颜色单元将调整为仍然是一半（即每种颜色占新高度的一半）。
我尝试过以下代码的变体。如果两个高度都是50％那么我只看到两个彩色圆点。如果两个高度都是50px那么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>
有一个简单的技巧吗？请注意，我的最终解决方案只需要1px垂直线，单元格高度的一半 - 所以我可以使用边框或背景颜色，甚至创建一个图形，如果它会有所帮助。哦，我的目标是多个浏览器。
答案 0 :(得分：5)
我认为您需要将父表大小决定为像这样分开一半。
<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>
答案 1 :(得分：3)
您可以使用各种额外的意大利面条标记，或者您可以在表格中添加一个类，如下所示：
<table class="FunkifyMyBackgounds">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
并使用一些非常简单的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>
必需的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. *****/
您可以查看jsBin上的完整代码。
它适用于所有主流浏览器，但不适用于IE6。
答案 2 :(得分：1)
为什么不使用直接的HTML和<rowspan>关键字？在我看来，这是最简单的方法。
将<TD ROWSPAN="2">用于要拆分的单元格。然后，您可以在这两个单元格上使用标准的HTML / CSS着色？由于每个只是一个标准表格单元格，您可以更改其边框等
答案 3 :(得分：1)
我相信你遇到了困难，因为你正在混合结构和布局。您应该使用CSS进行布局。你应该删除内部表并使用一些div。
我建议您创建一个html文档，然后从代码示例中复制/粘贴以下示例的代码。目前，我没有IE，所以我无法使用该浏览器测试样本。
以下是代码示例：
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>
在Mac OS X（Snow Leopard）上测试Safari 5和Firefox 3。
答案 4 :(得分：0)
我重新阅读了这个问题，并意识到我在实施答案时犯了一个大错误。我建议使用像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>