Bootstrap 表不跟随宽度显示:块 [英] Bootstrap table not following width with display: block
本文介绍了Bootstrap 表不跟随宽度显示:块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
从昨天开始，我实际上遇到了麻烦.
我正在使用 Bootstrap 4 和表格.实际上，如果我将宽度设置为超过 13.5vw，则表格不会跟随.这是小提琴 https://jsfiddle.net/aq9Laaew/88681/
这是代码
<table class="table table-striped datas-table table-sm rounded">
<thead>
<tr>
<th scope="col">Date of Visit</th>
<th scope="col">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
然后是 CSS
.datas-table {
overflow: auto;
display: block;
border-radius: 5px;
margin-top: 0.2604166666666667vw;
margin-left: 0.5208333333333334vw;
height: 16.11111111111111vh;
width: 14.583333333333334vw;
border: 1px solid rgba(0,0,0,0.1);
background-color: #FFFFFF;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}
.datas-table > tbody > tr > td:nth-child(2), .datas-table > thead > tr > th:nth-child(2) {text-align: right; padding-right: 1.1458333333333335vw;}
.datas-table > tbody > tr > td:nth-child(1), .datas-table > thead > tr > th:nth-child(1) {padding-left: 0.5729166666666667vw;}
正如您在 Fiddle 中看到的，桌子似乎没有跟上.我想使用 display: block 的原因是由于 overflow: auto，没有它，我的表格将不会滚动并且不会尊重宽度
As you could see in the Fiddle, the table don't seems to follow. The reason of why I want to use display: block, is due to overflow: auto, without it, my table won't scroll and the width will not be respected
谢天谢地，
推荐答案
试试我的表代码，
.viewTable {
table-layout:fixed;
margin:auto;
}
.thData, .tdData {
padding:8px;
text-align: center;
}
.theadData, tfoot {
background-color: #9ac9fb;
display:table;
width:100%;
}
.table-height .table .tdData {
vertical-align: middle !important;
}
.viewTable .tbodyData {
max-height:250px;
overflow:auto;
overflow-x:hidden;
display:block;
width:100%;
}
.item-dist .tbodyData {
height:490px;
overflow:auto;
overflow-x:hidden;
width:100%;
}
.tbodyData .trData {
display:table;
width:100%;
table-layout:fixed;
border-bottom: 1px solid #ffffff !important;
}
.table .theadData .thData {
border: none !important;
width: 10% !important;
text-align: center;
padding: 10px;
} <table align="center" class="table table-hover viewTable">
<thead class="theadData">
<tr class="trData">
<th class="thData">Column 1</th>
<th class="thData">Column 2</th>
<th class="thData">Column 3</th>
<th class="thData">Column 4</th>
</tr>
</thead>
<tbody class="tbodyData">
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr> <tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr> <tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr> <tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
</tbody>
</table>这篇关于Bootstrap 表不跟随宽度显示:块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
