Question

我有一个表格，您点击该行可查看更多详细信息。细节是使用colspan的嵌入式表格。这应该占据整个宽度。最终发生的事情是嵌入表强制第一个col到嵌入表的宽度。

这是最初的表现。

NAME1 AMOUNT PURPOSE
NAME2 AMOUNT PURPOSE
NAME3 AMOUNT PURPOSE

现在点击第一行，我希望看到嵌入式表占用所有列的以下内容。

NAME1 AMOUNT PURPOSE
 VENDOR KIND AMOUNT DETAIL
 VENDOR KIND AMOUNT DETAIL
 VENDOR KIND AMOUNT DETAIL
NAME2 AMOUNT PURPOSE
NAME3 AMOUNT PURPOSE

这就是我在chrome和firefox中看到的。

NAME1                       AMOUNT PURPOSE
 VENDOR KIND AMOUNT DETAIL
 VENDOR KIND AMOUNT DETAIL
 VENDOR KIND AMOUNT DETAIL
NAME2                       AMOUNT PURPOSE
NAME3                       AMOUNT PURPOSE

我可以真正使用一些帮助来尝试让第一列在显示嵌入表时保持其宽度。如果删除style ='display：none'，它最初会按预期显示。但是，一旦循环显示/隐藏切换，它就会显示错误。这是一个样本。

<!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 &amp; 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>

Answer 1

在你的javascript中：

elm.style.display = "inline";

对于tr - table row - tag，内联显示是禁止的。

正确的做法是将显示设置为“table-row”：

elm.style.display = "table-row";

您可以在此处详细了解：http://www.quirksmode.org/css/display.html 顺便说一句，你应该考虑为这类问题添加一个jsFiddle。

Answer 2

    elm.style.display = "inline";

显示类型是否错误。改为

    elm.style.display = "table-row";

一切都应该没问题。但是，可能无法在旧的IE浏览器上运行。

http://jsfiddle.net/YuEyp/

表格嵌入TD与COLSPAN搞乱父表

2 个答案: