按列的响应表

Question

我有一个有四列的表格，我需要一个响应式表格，其中每一列都在另一列之下，但我不知道该怎么做。我希望不使用Javascript有一些答案。

现在我有一张这样的桌子：

+---------------+
| Some text     |
+---------------+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+

而且我需要以更小的分辨率得到这个结果：

+-----------+
| Some text |
+-----------+
| A         |
+-----------+
| A         |
+-----------+
| A         |
+-----------+
| A         |
+-----------+
| B         |
+-----------+
| B         |
+-----------+
| B         |
+-----------+
| B         |
+-----------+
| B         |
+-----------+

等等。有可能吗？这是我的JSfiddle。 jsfiddle中的答案也是最好的。

Answer 1

最好的方法是使用 divs 并使用 CSS 的 display: table、display: table-row 和 display: table-cell 属性以及一些断点。否则，你将有很多丑陋的代码。这不是语义上最好的解决方案，但就响应式而言，它确实有效。

请参阅这篇出色的文章以获得更多帮助：http://css-tricks.com/almanac/properties/d/display/。

Answer 2

不是很好，但是你可以尝试制作tr标签列和td标签行

tr{
    display: inline;
    float:left;
}

td{
   display: block;
}

Answer 3

这正是Bootstrap's Grid System 的用途，因为 Boostrap 旨在为移动设备友好。您可以使用诸如

之类的代码设置文档

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

它会自动调整尺寸以适应更小的屏幕尺寸。

Answer 4

表格的响应性有问题，因为表格数据是按行写的，所以代码中的数据看起来是这样的：A, B, C, D, A, B, C, D...不是A, A, A,甲、乙、乙、乙、乙……

因此您无法以正确的顺序输出数据。

如果您使用媒体查询，输出如下所示：

@media all and (max-width:500px){
    table{
        width:100%;
    }

    td{
        display:block;
        width:100%;
    }

    tr{
        display:block;
        margin-bottom:30px;
    }
}

http://jsfiddle.net/sjdjrm8m/

---

您需要将您的表格转换为此注册：

HTML：

<table>
            <tr>
            <td colspan="2">Some title</td>
        </tr>
    <tr>
        <td>

<table>
    <tbody>

        <tr>
            <td style="text-align: center; background-color: #e8e8e8;">&nbsp;<span style="color: #1e2a64;"><strong>Title</strong></span>

            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #efedee;">
                <div class="circle"><strong>40.000</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #f5f5f5;">&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
            </td>
        </tr>
        <tr style="height: 70px;">
            <td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
        </tr>


    </tbody>
 </table>
    </td><td>
<table>
    <tr>
        <td style="text-align: center; background-color: #dedcdd;"><strong>&nbsp;<span style="color: #1e2a64;">Title2</span></strong>

            </td>
    </tr>
    <tr>
            <td style="text-align: center; background-color: #efedee;">
                <div class="circle"><strong>40.000</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #f5f5f5;">&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
            </td>
        </tr>
        <tr style="height: 70px;">
            <td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
        </tr>


    </tbody>
</table>

CSS：

@media all and (max-width:500px){
    table{
        width:100%;
    }

    td{
        display:block;
        width:100%;
    }

    tr{
        display:block;
        margin-bottom:30px;
    }

    tr tr{
        margin-bottom:0;
    }
}

http://jsfiddle.net/9yefftan/

Answer 5

这项工作有点长，但我的主要想法是转换表格中的每一列并将其包装到“主”表格中，然后使用 maťo 解决方案。

http://jsfiddle.net/kLmvwsp0/2/

---

HTML 页面

<table align="center" style="width:50%">
  <colgroup>
    <col width="50%" />
  </colgroup>

  <!-- Group 1-->
  <td>
    <table align="center">
      <tbody>
        <tr>
          <td style="text-align: center;"><strong>Title 1</strong>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">Text 1</td>
        </tr>
      </tbody>
    </table>
  </td>

  <!-- Group 2-->
  <td>
    <table align="center">
      <tbody>
        <tr>
          <td style="text-align: center;"><strong>Title 2</strong>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">Text 2</td>
        </tr>
      </tbody>
    </table>
  </td>

</table>

<hr />

<table align="center" style="width:100%">
  <colgroup>
    <col width="35%" />
  </colgroup>

  <!-- Group 1-->
  <td>
    <table align="center">
      <tbody>
        <tr>
          <td style="text-align: center;"><strong>Title 1</strong>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">Text 1</td>
        </tr>
      </tbody>
    </table>
  </td>

  <!-- Group 2-->
  <td>
    <table align="center">
      <tbody>
        <tr>
          <td style="text-align: center;"><strong>Title 2</strong>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">Text 2</td>
        </tr>
      </tbody>
    </table>
  </td>

  <!-- Group 3-->
  <td>
    <table align="center">
      <tbody>
        <tr>
          <td style="text-align: center;"><strong>Title 3</strong>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">Text 3</td>
        </tr>
      </tbody>
    </table>
  </td>
</table>

CSS 样式表

/* 
Generic Styling, for Desktops/Laptops 
*/

table {
  width: 100%;
  border-collapse: collapse;
}
/* Zebra striping */

tr:nth-of-type(odd) {
  background: #eee;
}
th {
  background: #333;
  color: white;
  font-weight: bold;
}
td,
th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}
@media all and (max-width: 500px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }
}