html - 如何限制 CSS 中一行的单元格数量

Question

我正在为移动设备编辑我的论坛。因此，我使用媒体查询根据设备宽度来格式化首页。

我的问题是所有类别都有这种样式，它将 td 元素全部排成一行。

<tr class="windowbg2">
                <td class="icon windowbg">
                </td>
                <td class="info">
                </td>
                <td class="stats windowbg">
                </td>
                <td class="lastpost">
                </td>
            </tr>

我不想进入创建行的 PHP，到目前为止我的尝试/搜索没有达到我想要的效果。

我希望将图标 td 和信息 td 压缩到一行中，并且在其下方有统计信息和最后发布的 tds。我如何单独使用 CSS 将这一行分成两行？

Answer 1

HTML

<table>
  <tr class="windowbg2">
    <td class="icon_windowbg">
      icon windowbg
    </td>
    <td class="info">
      info
    </td>
    <td class="stats_windowbg">
      stats windowbg
    </td>
    <td class="lastpost">
      lastpost
    </td>
  </tr>
</table>

CSS

table ,td {
  border: 1px solid #000;
}
table {
  width: 100%;
}
td {
  width: 49%;
  float: left;
  display: block;
}

table 上的边框只是为了让您能看到它。你可以把它取下来。

演示

http://codepen.io/anon/pen/xbdjoW?editors=110