テーブル間に幅tdを共有

Question

私はお互いに近くに2つのテーブルがあります。

私は2つのテーブルが同じテーブル内の行であるかのように最初の列のサイズが同じになるようにしたいと思います。私は列の固定サイズを設定したくありません。

table td:first-child { 
 
    background-color: pink; 
 
}

<table> 
 
    <tr> 
 
    <td>Caption from first table</td> 
 
    <td></td> 
 
    </tr> 
 
</table> 
 

 
<table> 
 
    <tr> 
 
    <td>Caption from second table</td> 
 
    <td></td> 
 
    </tr> 
 
</table>

第二の表は、再利用可能なコンポーネントから来ているので、私は同じテーブルを使用していない理由があるので、2つのテーブルが別々のままでなければなりません。私が見

一つの解決策は、さまざまな方法で実行時にJavaScriptを使用することです：

1. は、第一のテーブルに第二テーブルのすべて<tr>行を追加し、2番目のテーブルを削除します。このアプローチの問題点は、各テーブルに別々のスタイルを設定し、CSSがtable要素のクラス名を使用するようにするには、CSSが機能しなくなることです。

2. には、すべての最初の列の最大サイズを計算し、他の列に適用する方法があります。これはすべての列が存在するときは簡単ですが、テーブル/行が動的に追加されると複雑になります。

Answer 1

これは、テーブルの終了/開始タグを置き換える1つの方法です。

更新CSSルールを解決するためにコメント

に基づいて、各テーブルの最初のtrテーブル特定のクラスを与え、その後、スタイリングのためにそれを使用することは非常に簡単だろう。

このヒントは、スタンドアロンテーブルとマージテーブルの両方で機能します。

(function() { 
 
    
 
    document.body.innerHTML = document.body.innerHTML.replace(/<\/table>(.*|[\r\n]*)<table>/gi,''); 
 

 
})();

table td:first-child { 
 
    background-color: pink; 
 
} 
 

 
table .tbl1 td:first-child { 
 
    color: blue; 
 
} 
 

 
table .tbl2 td:first-child { 
 
    color: white; 
 
}

<table> 
 
    <tr class="tbl1"> 
 
    <td>Caption from first table</td> 
 
    <td></td> 
 
    </tr> 
 
</table> 
 

 
<table> 
 
    <tr class="tbl2"> 
 
    <td>Caption from second table</td> 
 
    <td></td> 
 
    </tr> 
 
</table>

Answer 2

私は過去に複数のdivの高さと同様のものをやりました。

あなたはCSSクラスを持っている最初のTDを編集することができた場合は、次のようにあなたのために働く必要がありますが：

HTML

<table> 
    <tr> 
    <td class="samewidth">Caption from first table</td> 
    <td></td> 
    </tr> 
</table> 

<table> 
    <tr> 
    <td class="samewidth">Caption from second table</td> 
    <td></td> 
    </tr> 
</table> 

のjQuery：

$(document).ready(function() { 
     var maxWidth = 0; 
     $('td.samewidth').each(function() { maxWidth = Math.max(maxWidth, $(this).width()); }).width(maxWidth); 
}); 

は（注：jQueryのが必要ですあなたがテーブルをたくさん持っていたら、おそらく驚くほど効率的ではないでしょう！）