html - 両方のテーブル セルに内部テーブルがある場合に 2 つの列が確実に並ぶようにする方法

Question

セル #3 とセル #4 に内部テーブルがある HTML テーブルがあります。

セル #3 とセル #4 の各テーブルの行を正しく並べる必要があります。

問題は、行のテキスト行の長さが 1 行を超える場合があり、他のテーブルにはこれがないため、行が一致しないことがあります。

私が制御できないデータベースからデータが来ているので、どうすればこれを修正できますか?

jsfiddle を作成しました: http://jsfiddle.net/HPkvV/

<style>
.main
{
 border: 1px solid #000000;
}
.main td
{
 border: 1px solid #000000;
}
.grid
{
    border-left: none !important;
    border-right: none !important;
    border-top:1px solid #dddddd;
    border-bottom:1px solid #dddddd;
}
.grid td
{
    border-left: none !important;
    border-right: none !important;
    border-top:1px solid #dddddd;
    border-bottom:1px solid #dddddd;
}
</style>



<table width="400">
<tr>
    <td>
        <table width="100%" class="main">
            <td valign=top>column 1</td>
            <td valign=top>column 2</td>
            <td valign=top>column 3
                <table id="names" class="grid">
                    <tr>
                        <td>line 1</td>
                    </tr>
                    <tr>
                        <td>line 2</td>
                    </tr>
                    <tr>
                        <td>line 3</td>
                    </tr>
                </table>
            </td>
            <td valign=top>column 4
                <table id="desc" class="grid">
                    <tr>
                        <td>line 1 description is a little too long so it wraps line 1 description is a little too long so it wraps</td>
                    </tr>
                    <tr>
                        <td>line 2 description</td>
                    </tr>
                    <tr>
                        <td>line 3 description</td>
                    </tr>
                </table>
            </td>

        </table>
    </td>
</tr>
</table>

Answer 1

ネストされたテーブルを使用している理由はありますか? 2 番目の情報セットは、リストに含まれている可能性があるように見えます。その場合は、すべてをうまく機能させるのがずっと簡単になります。

スタイル

.main
{
 border: 1px solid #000000;
}
.main td, .main th
{
 border: 1px solid #000000;
    vertical-align: top;
}
.grid li
{
    height: 4em; /*  this is the value that will help you get them even.  Though you will be guessing, hoping that no content runs too long.*/
    border-bottom:1px solid #dddddd;
}

HTML

<table class="main">
    <thead>
        <tr><th>Column 12</th>
        <th>Column 2</th><th>Column 3</th><th>Column 4</th></tr>
    </thead>
    <tbody>                    
        <tr>
            <td>foo</td>
            <td> bar</td>
            <td>
                <ul class="grid">
                    <li>
                        line 1
                    </li>
                    <li>
                        line 2
                    </li>
                    <li>
                        line 3
                    </li>
                </ul>
            </td>
            <td>
                <ul class="grid">
                    <li>
                        line 1 description is a little too long so it wraps line 1 description is a little too long so it wraps
                    </li>
                    <li>
                        line 2 description
                    </li>
                    <li>
                        line 3 description
                    </li>
                </ul>                
            </td>
        </tr>
    </tbody>
</table>​

データについて少し知識がなければ、完全なソリューションにはなりません。このソリューションでもフィドルを更新しました。

おっと新しいフィドルhttp://jsfiddle.net/HPkvV/2/

Answer 2

     <style>
  .main
 {
 border: 1px solid #000000;
 }
 .main td
  {
    border: 1px solid #000000;
  }
 .grid
 {
table-layout: fixed;
overflow: scroll;
border-left: none !important;
border-right: none !important;
border-top:1px solid #dddddd;
border-bottom:1px solid #dddddd;

}
.grid td
{

border-left: none !important;
border-right: none !important;
border-top:1px solid #dddddd;
border-bottom:1px solid #dddddd;
}
</style>



 <table width="400">
 <tr>
<td>
    <table width="100%" class="main">
    <tr>
        <td valign="top">column 1</td>
        <td valign="top">column 2</td>
        <td valign="top" style="width:25%;">column 3
            <table id="names" class="grid">
                <tr style="height:20;">
                    <td>line 1</td>
                </tr>
                <tr  style="height:20;">
                    <td>line 2</td>
                </tr>
                <tr  style="height:20;">
                    <td>line 3</td>
                </tr>
            </table>
        </td>
        <td valign="top" style="width:25%;">column 4
            <table id="desc" class="grid">
                <tr>
                    <td  ><div style="overflow-y:auto; height:20px;">line   1                 description is a little too long so it wraps line 1 description is a little too long so it wraps</div></td>
                </tr>
                <tr>
                    <td><div style="overflow-y:auto; height:20px;">line 2 description</div></td>
                </tr>
                <tr>
                    <td><div style="overflow-y:auto; height:20px;">line 3 description</div></td>
                </tr>
            </table>
        </td>
        </tr>
    </table>
   </td>
 </tr>
  </table>

あまりエレガントではなく申し訳ありませんが、サーバーが原因であることを願っています...

Answer 3

テーブルの操作を主張する場合 (テーブル データに対してのみ行う必要があります)、それらをネストしないことを強くお勧めします。rowspan 属性を使用することで、それらがなくても目的の結果を完全に達成できます。コードは次のようになります。

<table width="400" class="main">
    <tr>
        <td rowspan="4" valign=top>column 1</td>
        <td rowspan="4"valign=top>column 2</td>
        <td  valign=top>column 3</td>
        <td valign=top>column 4</td>
    </tr>
    <tr class="grid">
        <td>line 1</td>
        <td>line 1 description is a little too long so it wraps line 1 description is a little too long so it wraps</td>
    </tr>
    <tr  class="grid">
        <td>line 2</td>
        <td>line 2 description</td>
    </tr>
    <tr  class="grid">
        <td>line 3</td>
        <td>line 3 description</td>
    </tr>
</table>​

コンテンツが大きくなるにつれて、rowspan の値を更新する必要がありますが、サーバー側のスクリプトを使えばかなり簡単に更新できます。

実際の例については、こちらをご覧ください: http://jsfiddle.net/HPkvV/8/

!important（ここでは不要であり、注意して使用する必要があるcssから恐ろしいものも削除したことに注意してください！）