我正在使用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>
答案 0 :(得分：0)
试试这个，
<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>