我正在使用 XSL 生成基于 XML 流程图的报告，结果生成了一个大型 HTML 表格，其中的数据显示以下列:
- 一个节点的名字
- 有关该节点的信息列表
- 它之前的邻居
- 它的以下邻居和
- 流程图中涉及给定节点的每条路线
因此我有一个包含五列的大表格，连续的前四个单元格很重要，我需要在每个单元格中显示所有数据，但最后一个单元格可能很大(通常有数百行)并且不太重要，所以我想限制它的大小并将它的最大高度设置为行中最高的其他单元格的高度(通常少于 10 行，但偶尔有一百行左右)。
我可以在最后一个单元格内使用 DIV 的 max-height 属性将其限制为固定的像素高度，但如果行中的其他单元格高于我设置的 Max-Height，这就会留下空白，而且如果其他单元格的高度小于最终单元格的高度，我真的希望该行缩小到其他单元格的高度。
我想将其作为静态 HTML 使用 CSS 来调整单元格的大小 - 我意识到这可以使用 JS 来完成，我宁愿尽可能避免这样做(这是一个大表格)，但可以切换到如果这样更容易，则全面使用 DIV。我正在使用 Firefox 4 - 跨浏览器支持不是很重要。
tl；博士； - 想要将 TR 中的最后一个 TD 限制为其邻居的大小，而不管其内容如何。
代码如下。
<html><head>
<style type="text/css">
body { margin: 30px; }
table, tr, td, th { border: Solid Black 1px; vertical-align: top; font-family: "Tahoma"; font-size: 8pt; border-collapse: collapse;}
div.treebox { overflow:auto; max-height:100px; white-space: nowrap; width: 500px; }
td.info { width:200px;}
</style></head>
<body><h1>Flowchart Report</h1>
<table>
<tr>
<th>NODE</th><th>INFO</th><th>Preceding Nodes</th><th>Following Nodes</th><th>Usage</th>
</tr>
<tr>
<td class="info">
<b>N100</b>
</td>
<td class="info">
Text<hr />
Some more text<hr />
Even more text<hr />
Blah Blah Blah<hr />
Much more text<hr />
Still more text<hr />
I can't believe it's more text
</td>
<td class="info">
N12<br/>
N14<br/>
N16<br/>
N17<br/>
N18<br/>
N10<br/>
N1<br/>
</td>
<td class="info">
N27<br/>
N28<br/>
N20<br/>
N2<br/>
</td>
<td>
<div class="treeBox">
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n14 - n10 - n13<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n14 - n10 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n11 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n11 - n13<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n13<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n11 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n12
</div>
</td>
</tr>
<tr>
<td class="info">
<b>N100</b>
</td>
<td class="info">
Text<hr />
Some more text
</td>
<td class="info">
N12<br/>
N14<br/>
</td>
<td class="info">
N27<br/>
N28<br/>
</td>
<td>
<div class="treeBox">
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n14 - n10 - n13<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n14 - n10 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n11 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n11 - n13<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n13<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n11 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n12
</div>
</td>
</tr>
</table>
</body></html>
最佳答案
试试这个，
<html><head>
<style type="text/css">
body { margin: 30px; }
table { border: Solid Black 1px; vertical-align: top; font-family: "Tahoma"; font-size: 8pt; border-collapse: collapse; }
table td {border: Solid Black 1px; vertical-align: top; height: 200px;}
table th {border: Solid Black 1px;}
td.info { width: 200px;}
div.treebox { position:relative;overflow:auto; vertical-align: top; line-height: 100%;height: 100%; min-height: 100%; white-space: nowrap; width: 500px; }
</style></head>
<body><h1>Flowchart Report</h1>
<table>
<tr>
<th>NODE</th><th>INFO</th><th>Preceding Nodes</th><th>Following Nodes</th><th>Usage</th>
</tr>
<tr>
<td class="info">
<b>N100</b>
</td>
<td class="info">
Text<hr />
Some more text<hr />
Even more text<hr />
Blah Blah Blah<hr />
Blah Blah Blah<hr />
Blah Blah Blah<hr />
Blah Blah Blah<hr />
Blah Blah Blah<hr />
Blah Blah Blah<hr />
Blah Blah Blah<hr />
Blah Blah Blah<hr />
Much more text<hr />
Still more text<hr />
I can't believe it's more text
</td>
<td class="info">
N12<br/>
N14<br/>
N16<br/>
N17<br/>
N18<br/>
N10<br/>
N1<br/>
</td>
<td class="info">
N27<br/>
N28<br/>
N20<br/>
N2<br/>
</td>
<td>
<div class="treeBox">
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n14 - n10 - n13<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n14 - n10 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n11 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n11 - n13<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n13<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n11 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n12
</div>
</td>
</tr>
<tr>
<td class="info">
<b>N100</b>
</td>
<td class="info">
Text<hr />
Some more text
</td>
<td class="info">
N12<br/>
N14<br/>
</td>
<td class="info">
N27<br/>
N28<br/>
</td>
<td>
<div class="treeBox">
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n14 - n10 - n13<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n14 - n10 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n11 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n11 - n13<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n13<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n10 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n11 - n12<br />
n54 - n35 - n62 - n3 - n8 - n9 - n67 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n14 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n14 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n10 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n11 - n12<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n11 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n13<br />
n54 - n28 - n62 - n3 - n8 - n9 - n15 - n12
</div>
</td>
</tr>
</table>
</body></html>
关于html - 如何根据相邻单元格的高度来限制表格单元格 (td) 的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6263978/