具有相同TD寬度的多個表

要格式化這兩個表，我有一個css工作表。頂部表格是一個篩選器/排序選擇。第二個是可滾動的數據表。具有相同TD寬度的多個表

 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。

林無法得到這個權利的傢伙，任何幫助將不勝感激。

來源

2017-07-25 Juliemac

你有100％的套在頂部表內聯寬度不是底部表。這就是他們不協調的原因。另外內聯寬度現在已被棄用，您最好使用'style =「width：100％」'來獲得更便攜和規範的解決方案。 –

而且底部容器上還有一個滾動條，而不是頂部，這也會影響對齊。 –

我增加了一行來覆蓋滾動條中的多餘房地產。接得好：） – Juliemac

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>

來源

2017-07-25 13:47:35 Gerard

要對齊的兩個表的垂直右邊的列？如果是這樣，我有你的解決方案我改變了你的CSS和你錯過了第二個表中的tr。

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%; 
}

來源

2017-07-25 13:58:15

這應該做的伎倆。請注意，由於第二個表的滾動條會有少許餘量，但您可以通過在第一個數組中添加一個帶有滾動條寬度的選項卡來輕鬆更改它。希望這將有助於

#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>

來源

2017-07-25 14:03:08

具有相同TD寬度的多個表

回答

相關問題