long bootstrap table 中的等宽列
Equal width columns in long bootstrap table
在上面 table 中,我使用了 <td class="col-md-1"></td>
来实现等宽列。但只有前几列的宽度相等,如图所示。由于这是一个很长的 table 我想水平滚动以便 table 可以保持所需的列宽。但是这个 table 不会增长。我什至试过 table{ width:auto !important }
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
以上样式从 bootstrap
应用到我的 table
类 我在 table 元素中使用了 - <table class="table table-bordered"></table>
框架:Bootstrap 3
您将要使用此标记:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
尝试使用 <th>
。
引导程序中 table 的示例。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<table summary="This table shows how to create responsive tables using Bootstrap's default functionality" class="table table-bordered table-hover">
<caption class="text-center">An example of a responsive table based on <a href="https://getbootstrap.com/css/#tables-responsive" target="_blank">Bootstrap</a>:</caption>
<thead>
<tr>
<th>Country</th>
<th>Languages</th>
<th>Population</th>
<th>Median Age</th>
<th>Area (Km²)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Argentina</td>
<td>Spanish (official), English, Italian, German, French</td>
<td>41,803,125</td>
<td>31.3</td>
<td>2,780,387</td>
</tr>
<tr>
<td>Australia</td>
<td>English 79%, native and other languages</td>
<td>23,630,169</td>
<td>37.3</td>
<td>7,739,983</td>
</tr>
<tr>
<td>Greece</td>
<td>Greek 99% (official), English, French</td>
<td>11,128,404</td>
<td>43.2</td>
<td>131,956</td>
</tr>
<tr>
<td>Luxembourg</td>
<td>Luxermbourgish (national) French, German (both administrative)</td>
<td>536,761</td>
<td>39.1</td>
<td>2,586</td>
</tr>
<tr>
<td>Russia</td>
<td>Russian, others</td>
<td>142,467,651</td>
<td>38.4</td>
<td>17,076,310</td>
</tr>
<tr>
<td>Sweden</td>
<td>Swedish, small Sami- and Finnish-speaking minorities</td>
<td>9,631,261</td>
<td>41.1</td>
<td>449,954</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">Data retrieved from <a href="http://www.infoplease.com/ipa/A0855611.html" target="_blank">infoplease</a> and <a href="http://www.worldometers.info/world-population/population-by-country/" target="_blank">worldometers</a>.</td>
</tr>
</tfoot>
</table>
在上面 table 中,我使用了 <td class="col-md-1"></td>
来实现等宽列。但只有前几列的宽度相等,如图所示。由于这是一个很长的 table 我想水平滚动以便 table 可以保持所需的列宽。但是这个 table 不会增长。我什至试过 table{ width:auto !important }
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
以上样式从 bootstrap
应用到我的 table类 我在 table 元素中使用了 - <table class="table table-bordered"></table>
框架:Bootstrap 3
您将要使用此标记:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
尝试使用 <th>
。
引导程序中 table 的示例。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<table summary="This table shows how to create responsive tables using Bootstrap's default functionality" class="table table-bordered table-hover">
<caption class="text-center">An example of a responsive table based on <a href="https://getbootstrap.com/css/#tables-responsive" target="_blank">Bootstrap</a>:</caption>
<thead>
<tr>
<th>Country</th>
<th>Languages</th>
<th>Population</th>
<th>Median Age</th>
<th>Area (Km²)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Argentina</td>
<td>Spanish (official), English, Italian, German, French</td>
<td>41,803,125</td>
<td>31.3</td>
<td>2,780,387</td>
</tr>
<tr>
<td>Australia</td>
<td>English 79%, native and other languages</td>
<td>23,630,169</td>
<td>37.3</td>
<td>7,739,983</td>
</tr>
<tr>
<td>Greece</td>
<td>Greek 99% (official), English, French</td>
<td>11,128,404</td>
<td>43.2</td>
<td>131,956</td>
</tr>
<tr>
<td>Luxembourg</td>
<td>Luxermbourgish (national) French, German (both administrative)</td>
<td>536,761</td>
<td>39.1</td>
<td>2,586</td>
</tr>
<tr>
<td>Russia</td>
<td>Russian, others</td>
<td>142,467,651</td>
<td>38.4</td>
<td>17,076,310</td>
</tr>
<tr>
<td>Sweden</td>
<td>Swedish, small Sami- and Finnish-speaking minorities</td>
<td>9,631,261</td>
<td>41.1</td>
<td>449,954</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">Data retrieved from <a href="http://www.infoplease.com/ipa/A0855611.html" target="_blank">infoplease</a> and <a href="http://www.worldometers.info/world-population/population-by-country/" target="_blank">worldometers</a>.</td>
</tr>
</tfoot>
</table>