我有一个表格，您可以在其中单击该行以查看更多详细信息。详细信息是使用 colspan 的嵌入式表。这应该占据整个宽度。最终发生的是嵌入式表格强制第一个列为嵌入式表格的宽度。
这是最初的样子。
NAME1 AMOUNT PURPOSE NAME2 AMOUNT PURPOSE NAME3 AMOUNT PURPOSE
Now click on the first row, and I expect to see the following where the embedded table takes up all the columns.
NAME1 AMOUNT PURPOSE VENDOR KIND AMOUNT DETAIL VENDOR KIND AMOUNT DETAIL VENDOR KIND AMOUNT DETAIL NAME2 AMOUNT PURPOSE NAME3 AMOUNT PURPOSE
This is what I am seeing in both chromium and firefox.
NAME1 AMOUNT PURPOSE VENDOR KIND AMOUNT DETAIL VENDOR KIND AMOUNT DETAIL VENDOR KIND AMOUNT DETAIL NAME2 AMOUNT PURPOSE NAME3 AMOUNT PURPOSE
I could really use some help in trying to have the first column keep its width when the embedded table is shown. If you remove the style='display:none', it initially displays as expected. However, once you cycle through the show/hide toggle it displays incorrectly. Here is a sample.
<!DOCTYPE html>
<html><head>
<style>
.hidden { display: none; }
.money { text-align: right; }
td {
padding-left:1em;
}
</style>
<script language="javascript">
function show_hide(elmid){
elm = document.getElementById(elmid);
if (elm.style.display=="none") {
elm.style.display = "inline";
}
else {
elm.style.display = "none";
}
}
</script>
</head>
<body>
<h1>Reimbursement</h1>
<p>Click on 'D. Smith' or anywhere in the first row to see detail.</p>
<table>
<tr><th>Who</th><th>Amount</th><th>Purpose</th></tr>
<tr onclick="show_hide('exp47')"><td>D. Smith</td><td class='money'>37.61</td><td>Treats & Snacks</td></tr>
<tr id='exp47' style='display:none'>
<td colspan='3'>
<table><thead>
<tr><th>Vendor</th><th>Kind</th><th>Amount</th><th>Detail</th></tr>
</thead><tbody>
<tr><td>Dollar Tree</td><td>food</td><td>3.00</td><td>teddy bear cookies [3]</td></tr>
<tr><td>Dollar Tree</td><td>tax</td><td>0.05</td><td>1.50%</td></tr>
<tr><td>Sams</td><td>supplies</td><td>10.07</td><td>Lysol 3 pac</td></tr>
<tr><td>Sams</td><td>supplies</td><td>6.98</td><td>hand sani</td></tr>
<tr><td>Walmart</td><td>food</td><td>6.98</td><td>pf bulk gf</td></tr>
<tr><td>Walmart</td><td>food</td><td>3.58</td><td>gm cereal</td></tr>
<tr><td>Walmart</td><td>food</td><td>2.42</td><td>gv h4y rice</td></tr>
<tr><td>Walmart</td><td>food</td><td>4.44</td><td>gv ff sticks [3]</td></tr>
<tr><td>Walmart</td><td>tax</td><td>0.30</td><td>1.75%</td></tr>
<tr><td>Jewel</td><td>food</td><td>6.00</td><td>glbl cookies 10z [6]</td></tr>
<tr><td>Jewel</td><td>tax</td><td>0.14</td><td>2.25%</td></tr>
</tbody></table>
</td>
</tr>
<tr><td>Another</td><td class='money'>?.??</td><td>Another</td></tr>
</table></body></html>
最佳答案
在你的 javascript 中:
elm.style.display = "inline";
内联显示是 tr - table row - 标签的禁忌。
正确的做法是将显示设置为“table-row”:
elm.style.display = "table-row";
您可以在这里阅读更多相关信息:http://www.quirksmode.org/css/display.html 顺便说一下，您应该考虑为这类问题添加一个 jsFiddle。
关于javascript - TD 中嵌入的表，COLSPAN 弄乱了父表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13670542/