响应表 - 如果屏幕变小，则添加行

Question

有没有办法让这种类型的代码具有响应性？

<table class="resp-table">
  <tbody>
    <tr>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="/" />
        <p class="service-desc">XXX</p>
      </td>
    </tr>
  </tbody>
</table> 

目前显示为：

COL1|COL2|..|COL7

如果可能的话，我想一直以这种方式展示它。

但如果它的手机屏幕/小屏幕我想逐行显示它：

COL1 
COL2
.. 
COL 7

仅使用 CSS 可以实现吗？

Answer 1

有两种可能。

解决方案 1

我的建议是使用 div 而不是 table 它的简单替代解决方案。

HTML

<div class="table">
  <div class="table-cell">
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" />
    <p class="service-desc">XXX</p>
  </div>
  <div class="table-cell">
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" />
    <p class="service-desc">XXX</p>
  </div>
  <div class="table-cell">
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" />
    <p class="service-desc">XXX</p>
  </div>
  <div class="table-cell">
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" />
    <p class="service-desc">XXX</p>
  </div>
  <div class="table-cell">
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" />
    <p class="service-desc">XXX</p>
  </div>
  <div class="table-cell">
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" />
    <p class="service-desc">XXX</p>
  </div>
  <div class="table-cell">
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" />
    <p class="service-desc">XXX</p>
  </div>
</div>

CSS

.table {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  text-align: center;
  /* width:1% if you want justified table */
}

@media only screen and (max-width: 768px) {
  .table,
  .table-cell {
    display: block
  }
}

Working Fiddle

解决方案 2

如果您仍想使用表格，只需将display:block; 添加到td

对于表格标题，您需要从pseudo elements 获得帮助

例如将data attr（即data-th）添加到td（即data-th="some heading"）中；而不是添加以下css

@media only screen and (max-width: 768px) {
  thead {
    display: none;
  }
  td {
    display: block;
  }
  td:before {
    content: attr(data-th);
    display: block;
    font-weight: bold;
  }
}

Working Fiddle

Answer 2

您可以强制 table, thead, tbody, th, td, tr 为 displayed block

/*General Styles */

body,
p {
  margin: 0
}
img {
  max-width: 100%
}
/* Styles for Desktops/Laptops */

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed
}
/* Styles for Mobile */

@media only screen and (max-width: 768px) {
  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr {
    border: 1px solid red
  }
  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid green;
    position: relative;
    padding-left: 50%;
  }
  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
  /*Label the data */
  td:nth-of-type(1):before {
    content: "whatever here";
  }
  td:nth-of-type(2):before {
    content: "whatever here";
  }
  td:nth-of-type(3):before {
    content: "whatever here;

  }
  td:nth-of-type(4):before {
    content: "whatever here";
  }
  td:nth-of-type(5):before {
    content: "whatever here";
  }
  td:nth-of-type(6):before {
    content: "whatever here";
  }
  td:nth-of-type(7):before {
    content: "whatever here";
  }
}

<table class="resp-table">
  <tbody>
    <tr>
      <td>
        <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" />
        <p class="service-desc">XXX</p>
      </td>
      <td>
        <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" />
        <p class="service-desc">XXX</p>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

如果您使用的是 Bootstrap，您可以编写两个单独的表（一个用于每个目的）并为移动版本添加类 visible-xs，为另一个添加 hidden-xs。

您也可以只调整浏览器窗口的大小来测试它。

如果你只想要 CSS，我建议你从 bootstrap.css 文件中获取这些类。