垂直拆分表格单元格
[英]Split a table cell vertically
问题描述
我有一个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的垂直线，其高度为单元格的一半-因此，我可以使用边框或背景色，甚至可以创建图形（如果有帮助的话）。 哦，我的目标是多个浏览器。
5 个解决方案
解决方案1
5 2010-06-23 02:00:53
我认为您需要确定父表的大小，以这样分隔一半。
<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>
解决方案2
3 2010-06-23 07:12:14
您可以使用各种额外的意大利面条标记，也可以向表中添加一个类，如下所示：
<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。
解决方案3
1 2010-06-23 02:02:05
为什么不使用straighforward HTML和<rowspan>关键字？ 在我看来，这是最简单的方法。
将<TD ROWSPAN="2">用于要拆分的单元格。 然后，您可以在这两个单元格上使用标准HTML / CSS着色吗？ 由于每个只是一个标准的表格单元格，因此您可以更改其边框等
解决方案4
1 2010-06-23 02:10:01
我相信您会遇到困难，因为您正在混合结构和布局。 您应该使用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上进行了测试。
解决方案5
0 2010-06-23 02:45:48
我重新阅读了问题，并意识到在实施答案时犯了一个重大错误。 我建议像Andy所说的那样使用div，但我坚持使用javascript和CSS。 我没有看到一种明显的方法来实现div或表的动态高度，而无需分配ID和操纵浏览器生成和返回的高度。 Divs和桌子出于某种原因以这种方式运行。
<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>
如何垂直拆分表格单元格
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.