1

我有一个表格，您可以在其中单击该行以查看更多详细信息。详细信息是使用 colspan 的嵌入式表格。这应该占据整个宽度。最终发生的是嵌入式表格将第一个 col 强制为嵌入式表格的宽度。

这是最初的样子。

名称1 金额用途
名称2 金额用途
名称3 金额用途

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

名称1 金额用途
 供应商种类数量详细信息
 供应商种类数量详细信息
 供应商种类数量详细信息
名称2 金额用途
名称3 金额用途

这就是我在铬和火狐中看到的。

名称1 金额用途
 供应商种类数量详细信息
 供应商种类数量详细信息
 供应商种类数量详细信息
名称2 金额用途
名称3 金额用途

当显示嵌入表格时，我真的可以使用一些帮助来尝试让第一列保持其宽度。如果您删除 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>
4

2 回答 2

2

在您的 javascript 中：

elm.style.display = "inline";

内联显示是 tr - 表格行 - 标记的禁忌。

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

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

您可以在此处阅读更多相关信息：http ://www.quirksmode.org/css/display.html 顺便说一下，您应该考虑为这类问题添加一个 jsFiddle。

于 2012-12-02T15:13:44.923 回答
0 
    elm.style.display = "inline";

是错误的显示类型。改成

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

一切都应该没问题。不过，可能不适用于较旧的 IE 浏览器。

http://jsfiddle.net/YuEyp/

于 2012-12-02T15:22:01.617 回答