【发布时间】：2011-09-09 23:24:56
【问题描述】：
我正在使用 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>
【问题讨论】：
-
更新你的行，div.treebox { overflow:auto;高度：200px；最大高度：100px；空白：nowrap；宽度：500px； }
-
嗯，这似乎将高度限制为静态 100 像素 - 有些行比这高得多......
标签： html css html-table