我遇到了问题,这是我的代码:
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th colspan="9" style="text-align: center">Main Header</th>
</tr>
</thead>
<tr>
<th>checkbox</th>
<th>columna 1</th>
<th>columna 2</th>
<th>columna 3</th>
<th>columna 4</th>
<th>columna 5</th>
<th>columna 6</th>
<th>columna 7</th>
<th>columna 8</th>
<th>columna 9</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>coso 1</td>
<td>coso 2</td>
<td>coso 3</td>
<td>coso 4</td>
<td>coso 5</td>
<td>coso 6</td>
<td>coso 7</td>
<td>coso 8</td>
<td>coso 9</td>
</tr>
<tr>
<th></th>
<th>columna 1</th>
<th>columna 2</th>
<th>columna 3</th>
<th>columna 4</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>coso 1</td>
<td>coso 2</td>
<td>coso 3</td>
<td>coso 4</td>
</tr>
</table>
我正在使用Bootstrap,问题是第四行和第五行比其他行短,我想要做的是那些td填充所有宽度而没有colspan,因为行来自服务器而且我不喜欢不知道有多少来了,我只知道最大的列数是9,我想要做的就是填充所有宽度,使得在较短行的右边没有空白区域。
答案 0 :(得分:-1)
使用此css
<style>
table.table.table-striped {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
text-align: left;
}
table.table.table-striped thead {
width: 100%;
}
table.table.table-striped thead th, table.table.table-striped thead tr {
width: 100%;
display: block;
}
table.table.table-striped tbody th,table.table.table-striped tbody td {
min-width: 100px;
}
table.table.table-striped tbody tr {
display: block;
}
table.table.table-striped tbody th:last-child, table.table.table-striped
tbody td:last-child {
width: 100%;
}</style>