html - bootstrap 3 - 响应表布局到每个 td 在新行上的位置

Question

我有一张表格，它是一项调查，所以它有一个带有答案类型的 thead 和一个带有问题和单选按钮的 tbody。我想要发生的是，当用户将屏幕缩小到移动尺寸时，它会改变表格的外观，因此它不会将所有内容都水平显示，而是在 1 行上显示问题，在新行上显示每个单选按钮.. . 像这样:

如何使用下面的代码最轻松地做到这一点？我一直试图让它响应，但它不起作用。

<table class="table row" id="10878">
            <thead>
                <tr class="">
                    <th></th>
                        <th class="matrixOptions">Very likely</th>
                        <th class="matrixOptions">Not Likely</th>
                </tr>
            </thead>
            <tbody class="container">
                <tr class="matrixList row">
                    <td class="matrixQuestion col-xs-12 col-sm-6">Would you work for a startup?</td>
                            <td class="matrixOption col-xs-12">
                                <div class="MatrixResults" style="display: none;" id="22671">50%</div>
                                                            <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" checked="" name="10879" id="22671" type="radio"><i></i></label></div>
                        </td>
                            <td class="matrixOption col-xs-12">
                                <div class="MatrixResults" style="display: none;" id="22672">50%</div>
                                                            <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" name="10879" id="22672" type="radio"><i></i></label></div>
                        </td>
                </tr>
                <tr class="matrixList row">
                    <td class="matrixQuestion col-xs-12 col-sm-6">12345</td>
                            <td class="matrixOption col-xs-12">
                                <div class="MatrixResults" style="display: none;" id="22673">100%</div>
                                                            <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" checked="" name="10880" id="22673" type="radio"><i></i></label></div>
                        </td>
                            <td class="matrixOption col-xs-12">
                                <div class="MatrixResults" style="display: none;" id="22674">0%</div>
                                                            <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" name="10880" id="22674" type="radio"><i></i></label></div>
                        </td>
                </tr>
            </tbody>
        </table>

有什么想法吗？谢谢!

Answer 1

最简单的方法是简单地以 768px 的神奇 Bootstrap 移动宽度给每个表格元素 display: block。 block 级元素的默认宽度为100%，因此每个元素将占据一整行并相互堆叠。

这可以从以下方面看出:

@media screen and (max-width: 768px) {
  table, thead, tr, td {
    display: block;
  }
}

<table class="table row" id="10878">
  <thead>
    <tr class="">
      <th></th>
      <th class="matrixOptions">Very likely</th>
      <th class="matrixOptions">Not Likely</th>
    </tr>
  </thead>
  <tbody class="container">
    <tr class="matrixList row">
      <td class="matrixQuestion col-xs-12 col-sm-6">Would you work for a startup?</td>
      <td class="matrixOption col-xs-12">
        <div class="MatrixResults" style="display: none;" id="22671">50%</div>
        <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" checked="" name="10879" id="22671" type="radio"><i></i></label></div>
      </td>
      <td class="matrixOption col-xs-12">
        <div class="MatrixResults" style="display: none;" id="22672">50%</div>
        <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" name="10879" id="22672" type="radio"><i></i></label></div>
      </td>
    </tr>
    <tr class="matrixList row">
      <td class="matrixQuestion col-xs-12 col-sm-6">12345</td>
      <td class="matrixOption col-xs-12">
        <div class="MatrixResults" style="display: none;" id="22673">100%</div>
        <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" checked="" name="10880" id="22673" type="radio"><i></i></label></div>
      </td>
      <td class="matrixOption col-xs-12">
        <div class="MatrixResults" style="display: none;" id="22674">0%</div>
        <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" name="10880" id="22674" type="radio"><i></i></label></div>
      </td>
    </tr>
  </tbody>
</table>