1

行をクリックして詳細を表示するテーブルがあります。詳細は、colspanを使用した埋め込みテーブルです。これは全幅を占めるはずです。最終的に発生するのは、埋め込みテーブルが最初の列を埋め込みテーブルの幅に強制することです。

これが最初の外観です。

NAME1金額の目的
NAME2金額の目的
NAME3金額の目的

ここで最初の行をクリックすると、埋め込みテーブルがすべての列を占める次のようになります。

NAME1金額の目的
 ベンダーの種類の金額の詳細
 ベンダーの種類の金額の詳細
 ベンダーの種類の金額の詳細
NAME2金額の目的
NAME3金額の目的

これは私がクロムとFirefoxの両方で見ているものです。

NAME1金額の目的
 ベンダーの種類の金額の詳細
 ベンダーの種類の金額の詳細
 ベンダーの種類の金額の詳細
NAME2金額の目的
NAME3金額の目的

埋め込まれたテーブルが表示されているときに最初の列の幅を維持するために、実際にいくつかの助けを借りることができます。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-テーブル行-タグではノーノーです。

正しいことは、displayを「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 に答える