如何在可滚动工作台上施加100%的宽度 [英] How to apply width 100% with scroll able table body
问题描述
我正在尝试实现可滚动的表主体.我能够成功完成此操作,但是现在我遇到宽度为100%的问题
I am trying to implement the table body scrollable. I am able to successfully did it but now I am facing issue with width 100%
请检查此jsfiddle https://jsfiddle.net/Ratan_Paul/stpgd6x6/
Please check this jsfiddle https://jsfiddle.net/Ratan_Paul/stpgd6x6/
<table>
<thead style="display:block;">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody style="max-height: 50px;display: block;overflow-y:auto;">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
我不能将宽度应用于thead和tbody吗?任何解决方案,以便我可以使用滚动以及将宽度设置为100%
Can't I apply the width to thead and tbody ? any solution so I can use the scroll as well as set the width to 100%
推荐答案
由于要使用3个列标题(100个,因此您需要清除表最初提供的一些样式,并将宽度设置为33%)%/3)
You'll need to clear a few styles that initially come with tables as well as set a width of 33% since you're using 3 column headers (100%/3)
参见下文:
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 2px solid black;
}
thead, tbody, tr, td, th { display: block; }
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
line-height: 30px;
text-align: left;
}
tbody {
height: 100px;
overflow-y: auto;
}
thead {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: calc(100% - 17px);
}
tbody { border-top: 2px solid black; }
tbody td, thead th {
width: 33%;
float: left;
}
tbody td:last-child, thead th:last-child {
border-right: none;
}
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
更详细的答案可以在这里找到: HTML宽度为100%,并在tbody内垂直滚动的桌子
More detailed answer can be found here: HTML table with 100% width, with vertical scroll inside tbody
这篇关于如何在可滚动工作台上施加100%的宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!