使用 Bootstrap 将 table 中的 2 列转换为一列以用于较小的显示尺寸

Question

是否可以使用 Bootstrap 且不使用其他自定义脚本将具有 2 列的 table 转换为具有 1 列的 table 用于小显示尺寸？

我知道怎么做，但如果只使用 div 而不是 table。

转换为：

<table>
 <tr>
   <td>Column 1</td>
   <td>Column 2</td>
 </tr>
</table>

进入这个

<table>
 <tr>
   <td>Column 1</td>
 </tr>
 <tr>
   <td>Column 2</td>
 </tr>
</table>

Answer 1

只需使用响应式 table 就像：

<table class="table-responsive">
<tr>
   <td>Column 1</td>
   <td>Column 2</td>
 </tr>
</table>

Answer 2

根据 bootstrap documentation，这应该有效：

<div class="table-responsive">
   <table class="table"></table>
</div>

Convert 2 columns in a table into one for small display sizes using Bootstrap