How can I constrain a table cell (td) height based on a neighbouring cell height?
I'm using XSL to generate a report based on an XML flowchart, resulting in a large HTML table from the开发者_StackOverflow中文版 data showing the following columns:
- a node's name
- a list of information about that node
- its preceding neighbours
- its following neighbours and
- every route through the flowchart that involves the given node
Thus I have a large table with five columns, the first four cells in a row are important and I need to show all of the data in each of these cells, but the final cell can be huge (usually hundreds of lines) and is less important so I want to constrain its size and set its max-height to be that of the highest other cell in the row (usually less than 10 lines, but occasionally a hundred or so).
I can use the max-height property of a DIV inside the final cell to constrain this to a fixed pixel height, but this leaves gaps if other cells in the row are higher than the Max-Height that I've set, and also I'd really like the row to shrink down to the height of the other cells if their height is less than the height of the final cell.
I'd like to do this as static HTML using CSS to size the cell - I realise that this could be done using JS, I'd rather avoid that if possible (it's a big table), but could swap over to using DIVs all round if that makes this easier. I'm using Firefox 4 - cross-browser support is not terribly important.
tl;dr; - Want to constrain the last TD in a TR to be the size of its neighbours regardless of its content.
Code is as follows.
<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>
try this,
<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>
加载中,请稍侯......
精彩评论