33

幅 600px でそれぞれ 5 列の 2 つのテーブルがあります。ただし、各列の幅は設定されていません。ここでは、両方のテーブルで列幅を同じにする必要があります。CSS または jQuery を使用できます。また、列幅を手動で修正したくありません。

HTML の例:

<table width="600" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>hdng 1</td>
        <td>hdng 2</td>
        <td>hdng 3</td>
        <td>hdng 4</td>
        <td>hdng 5</td>
    </tr>
</table>
<table width="600" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>content content content</td>
        <td>con</td>
        <td>content content content</td>
        <td>content content content</td>
        <td>content content content</td>
    </tr>
</table>

どんな助けでも大歓迎です。

4

10 に答える 10

21

すべての列を同じ幅にしたい場合は、各テーブルに正確に 5 つの列があることが確実なので、次のことをお勧めします。

<table style="table-layout:fixed">
<col style="width:20%" span="5" />
<tr><!--stuffs...--></tr>
</table>
于 2012-08-30T05:54:07.367 に答える
5

あなたは探しているtable-layout:fixed

例を参照してください:

http://jsfiddle.net/RsAhk/

于 2012-08-30T05:15:18.423 に答える
2

各テーブルに正確に5つの列があることがわかっている場合は、適用するwidth: 20%のが最善の策です。

td {
    width: 20%;
}

ただし、列をいくつでも持つことができる場合は、代わりに単純なJQueryスクリプトを記述して、列の数を把握し、それに応じて幅を設定することができます。

これがJSFiddleのデモです。HTMLを変更id="first"して最初のテーブルに追加したので、具体的な参照を取得できました。次に、JavaScriptは次のとおりです。

var num = $("table#first tr:first-child > td").length;
var width = (100 / num) + "%";

$("td").css("width", width);​

基本的に、#firstテーブルの最初の行を取得し、列の数をカウントします。次に、その列数に対応するパーセンテージ幅を見つけます。次に、その幅をすべての<td>要素に適用します。

これは、 sにcolspan定義がない限り機能し、列数が減少します。td両方のテーブルで明示的な幅を定義したため、列は等しくなります。

于 2012-08-30T06:06:02.697 に答える
0

css クラスを定義してフォーマットし、両方のテーブルでそのクラスを使用します。

あなたの temp.css

.anyClass tr td{
width: 150p;
etc...
}

そしてHTMLファイルで

    <table id="table1" class="anyClass">

        ......
        ......
        </table>

        <table id="table2" class="anyClass">        
        ......
        ......
        </table>
于 2012-08-30T05:24:03.943 に答える
-1

tbodyテーブルをfor each と組み合わせて (@Relequestual で提案されているように)、<th scope="rowgroup">ヘッダーに次を使用することで、列幅を同期できます。

table {
  border-collapse: collapse;
}

table thead,
table tbody {
  border-bottom: solid;
}

table tbody th {
  text-align: left;
}
<table>
  <thead>
    <tr> <th> ID <th> Measurement <th> Average <th> Maximum
  <tbody>
    <tr> <td> <th scope=rowgroup> Cats <td> <td>
    <tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
    <tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
  <tbody>
    <tr> <td> <th scope=rowgroup> English speakers <td> <td>
    <tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
    <tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
</table>

出典: HTML 仕様自体の例

于 2020-02-14T18:15:12.247 に答える