具有相同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宽度的多个表

回答

相关问题