html - 制作一个表格，每行 4 个单元格，通过将第三个和第四个单元格移动到新行中来响应

Question

这是原始表格 ( fiddle Example ):

Title    | BookABC  | Author    | Peter
Category | Religion | Publisher | ABC Publisher

<table class="infoTab">
    <tbody>
        <tr>
            <td>Title</td>
            <td>Book ABC</td>
            <td>Author</td>
            <td>Peter</td>
        </tr>
        <tr>
            <td>Category</td>
            <td>Religion</td>
            <td>Publisher</td>
            <td>ABC Publisher</td>
        </tr>
    </tbody>
</table>

我想让表格在移动设备上响应。有什么方法可以将第三个和第四个单元格移动到自己的一行中，以便在移动 View 中它会变成:

   Title    | ABC ABC  
   Author   | Peter
   Category | Religion
   Publisher| ABC Publisher

如何使用 css 实现这一点？ fiddle 示例无法使用 display: inline-block 和 width:50%。它将每个单元格变成自己的一行，如下所示:

Title
Book ABC

Author
Peter

Category
Religion

Publisher
ABC Publisher

CSS 代码:

.infoTab{    
    font-size: 14px;
    border-spacing: 0;
    text-align: left;
    width:90%
}
.infoTab td:nth-child(odd) {
    font-weight: bold;
}
.infoTab td{   
    width: 25%;
    text-transform: capitalize;
    background-color: #EFEFEF;
    border-bottom: #ccc 1px solid;
    padding: 4px;
    position: relative;
    vertical-align: top;
    max-width: 700px;
    color: #4D6679;}

@media  only screen and (max-width: 525px) {
   .infoTab td{ 
        width: 50%;
        display: inline-block;
    }
    .infoTab td:nth-child(3){display:block}
    .infoTab td:nth-child(4){display:inline-block}
}

Answer 1

问题是 CSS 宽度，不包括填充和边框。也就是说，一个 50% 宽的单元格的实际宽度是 50% 加上填充的 8px 加上边框的 2px。因此，两个单元格不能放在一条线上!两个单元格之间也有一个空间。

因此解决方案是设置 box-sizing: border-box 以在宽度中包含填充和边框，并添加 float: left 以摆脱空间。
参见 new fiddle .

但是。

表格的标记不好。
首先，您不应该仅仅因为布局看起来不错就在表格行中放置任意数量的单元格。这不是表格的用途。
其次，包含属性名称而不是值的单元格应该是 th 单元格，而不是 td。

表格应该是这样的:每行两个单元格，一个 th 和一个 td 来显示一条数据。
然后翻转 css 的逻辑，使其在窄屏幕上看起来像设计的方式(两列)，但在较宽的屏幕上扩展为四列。

此方法的另一个优点是您可以扩展它以在非常宽的屏幕上显示多于四列。

.infoTab {
  font-size: 14px;
  border-spacing: 0;
  width: 90%
}
.infoTab th, .infoTab td {
  text-align: left;
  text-transform: capitalize;
  background-color: #EFEFEF;
  border-bottom: #ccc 1px solid;
  padding: 4px;
  position: relative;
  vertical-align: top;
  color: #4D6679;
}

@media all and (min-width: 526px) {
  .infoTab, .infoTab tbody {
    display: block;
  }
  .infoTab tr, .infoTab th, .infoTab td {
    display: inline-block;
    width: 50%;
    float: left;
    box-sizing: border-box;
  }
  .infoTab::after {
    clear:left;
    display:block; content:'';
  }
}

<table class="infoTab">
  <tbody>
    <tr>
      <th>Title</th>     <td>ABC ABC</td>
    </tr>
    <tr>
      <th>Author</th>    <td>Peter</td>
    </tr>
    <tr>
      <th>Category</th>  <td>Religion</td>
    </tr>
    <tr>
      <th>Publisher</th> <td>ABC Publisher</td>
    </tr>
  </tbody>
</table>