html - 互いの下にある 2 つの HTML テーブル

Question

だから私はお互いの下に2つのhtmlテーブルを持っています各テーブルには2つの列があります下のテーブルの各列を上の列と同じ列の下に正確に配置したいという問題

|表1| |----|-----| |----|-----|

|表2| |----|-----| |----|-----|

編集:

使ってみた

<td valign="top"></td>

ただし、これが適切なコードだとは思いません

Answer 1

これを試して、両方のテーブルに同じ td クラスを使用してください。

HTML サンプル

<table id="table1">
    <tr><td class="first">aaa</td><td class="second">aaa</td></tr>
    <tr><td class="first">aaa</td><td class="second">aaa</td></tr>
    <tr><td class="first">aaa</td><td class="second">aaa</td></tr>
</table>
<br /><br />
<table id="table2">
    <tr><td class="first">aaa</td><td class="second">aaa</td></tr>
    <tr><td class="first">aaa</td><td class="second">aaa</td></tr>
    <tr><td class="first">aaa</td><td class="second">aaa</td></tr>
</table>

CSS

#table1, #table2 {float:left;width:700px;}

td.first{ width:40%;}

td.second{ width:60%;}

Answer 2

テーブルにクラスを追加すると、マージンとパディングを削除できるはずです

table {
    margin: 0;
    padding: 0; 
}

正確に並べる必要がある場合は、各フィールドの幅を指定します

td {
    width: 10%; 
}

Answer 3

「yeyene..」の例を試してみてください。

そうでなければ、次のことができます。CSS テーブルを使用すると、この問題は簡単に解決できます。

csstable

Answer 4

テーブルの列に同じ幅を設定できます。

ただし、設定した幅は基本的に単なる提案であり、コンテンツの要件によりブラウザーによって上書きされる場合があります。両方のテーブルで CSS を使用table-layout: fixedすると、通常はこれが修正されますが、厄介な副作用が発生する可能性があります (たとえば、そうでないコンテンツは単に切り捨てられます)。いずれにせよ、ブラウザに列幅を動的に計算させるのではなく、列幅を推測する必要があります。

おそらく最善の方法は、2 つのテーブルを 1 つのテーブルに結合することです。