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

PATH

<强> CSS

<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>

Working Fiddle

解决方案2

如果您仍想使用表，只需将.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 } }添加到display:block;

即可

对于表格标题，您需要从td

获取帮助

例如将pseudo elements（即data attr）添加到data-th（即td）;而不是添加以下css

data-th="some heading"

<强> Working Fiddle

Answer 2

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

＆＃13;

/*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";
  }
}

＆＃13;

<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>

＆＃13;

Answer 3

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

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

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

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

3 个答案: