同じTD幅の複数のテーブル

Question

これらの2つのテーブルをフォーマットするには、CSSシートが必要です。一番上の表はフィルター/ソートの選択です。 2番目はスクロール可能なデータテーブルです。

 div#scrollTableContainer { 
 
    width: auto; 
 
    margin: 20px; /* just for presentation purposes */ 
 
    border: 1px solid black; 
 
    } 
 

 
    #tHeadContainer { 
 
     background: #CC3600; 
 
     color: black; 
 
     font-weight: bold; 
 
    } 
 
    #tBodyContainer { 
 
     height: 750px; 
 
     overflow-y: scroll; 
 
    } 
 
     td:first-child { 
 
     min-width: 5%; /* EDIT */ 
 
     max-width: 5%; 
 
     border-left:0; 
 
    } 
 

 
    td:first-child + td { 
 
     min-width: 4%; 
 
     max-width: 4%; 
 
    } 
 

 
    td:first-child + td + td { 
 
     min-width: 4%; 
 
     max-width: 4%; 
 
    }

<div id="scrollTableContainer"> 
 
    <div id="tHeadContainer"> 
 
    <table border="1" align="center" width="100%" cellpadding="0" cellspacing="0"> 
 

 
    <tr> 
 
    <th bgcolor="<%=bgc0%>">USED</th> 
 
    <th bgcolor="<%=bgc0%>">STATUS</th> 
 
    </tr> 
 
    </table> 
 
    </div>      
 
      
 
    <div id="tBodyContainer"> 
 
    <table border="1" align="center" id="tBody" class="TableData"> 
 
    <td> stuff </td> 
 
    <td> More stuff </td> 
 
    </table> 
 
    </div> 
 
    </div>

タイトル/ヘッダ列は以下の表の列と一致しないように、2つのテーブルのどちらが賢いの列を揃えています。それはchrome/IEでもほとんど同じですが、firefoxは完全なshambleです。

私はこの右の男を得るために損失で、任意の助けに感謝します。

Answer 1

div#scrollTableContainer { 
 
    width: auto; 
 
    margin: 20px; 
 
    /* just for presentation purposes */ 
 
} 
 

 
#tHeadContainer { 
 
    background: #CC3600; 
 
    color: black; 
 
    font-weight: bold; 
 
} 
 

 
#tBodyContainer { 
 
    height: 750px; 
 
} 
 

 
th:first-child, td:first-child { 
 
    min-width: 15%; 
 
    max-width: 15%; 
 
    width: 15%; 
 
} 
 

 
td:first-child+td { 
 
    min-width: 4%; 
 
    max-width: 4%; 
 
} 
 

 
td:first-child+td+td { 
 
    min-width: 4%; 
 
    max-width: 4%; 
 
}

<div id="scrollTableContainer"> 
 
    <div id="tHeadContainer"> 
 
    <table border="1" align="center" width="100%" cellpadding="0" cellspacing="0"> 
 

 
     <tr> 
 
     <th bgcolor="<%=bgc0%>">USED</th> 
 
     <th bgcolor="<%=bgc0%>">STATUS</th> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
    <div id="tBodyContainer"> 
 
    <table border="1" align="center" width="100%" cellpadding="0" cellspacing="0"> 
 
     <td> stuff </td> 
 
     <td> More stuff </td> 
 
    </table> 
 
    </div> 
 
</div>

Answer 2

あなたは垂直方向に右の両方のテーブルの列を揃えたいですか？ それがそうなら、私はあなたのための解決策を持っています 私はあなたのCSSを変更しました。

https://jsfiddle.net/9ccwkoav/

div#scrollTableContainer { 
width: auto; 
margin: 20px; /* just for presentation purposes */ 
border: 1px solid black; 
} 

#tHeadContainer { 
    background: #CC3600; 
    color: black; 
    font-weight: bold; 
} 
#tHeadContainer th{ 
width:50%; 
} 
#tBodyContainer { 
    height: 750px; 
    overflow-y: auto; 
} 
.TableData{ 
    width:100%; 
} 
.TableData td{ 
width:50%; 
} 

Answer 3

これはトリックを行う必要があります。 2番目のテーブルのスクロールバーのために余裕が少しありますが、最初の配列にタブを追加してスクロールバーの幅を簡単に変更できます。それはあなたが100％のトップテーブルの上にセットしていない下の表のインライン幅を持っている

#scrollTableContainer { 
 
\t width : 96%; 
 
\t margin : auto; 
 
\t border : 1px solid #ccc; 
 
} 
 

 
#tHeadContainer { 
 
\t background-color : green; 
 
\t width : 100%; 
 
} 
 

 
#tBodyContainer { 
 
\t width : 100%; 
 
\t height : 750px; 
 
\t overflow-y : scroll; 
 
} 
 

 
#tHeadContainer table, #tBodyContainer table { 
 
\t border-collapse : collapse; 
 
\t width : 100%; 
 
} 
 

 
td, th { 
 
\t border : 1px solid black; 
 
} 
 

 
tr { 
 
\t width : 100%; 
 
} 
 

 
th:first-child, td:first-child { 
 
\t min-width : 15%; 
 
\t max-width : 15%; 
 
\t width : 15%; /* Tweak this value to change the first column width */ 
 
}

<div id="scrollTableContainer"> 
 

 
\t <div id="tHeadContainer"> 
 
\t \t <table> 
 
\t \t \t <tr> 
 
\t \t \t \t <th>USED</th> 
 
\t \t \t \t <th>STATUS</th> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t </div> 
 
\t 
 
\t <div id="tBodyContainer"> 
 
\t \t <table> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Stuff</td> 
 
\t \t \t \t <td>Some other stuff</td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t </div> 
 
\t 
 
</div>