Question

我有一个包含2行5列的表。

对于移动优化，我希望<td>的行为像浮动div一样，给我2列5行。

为此我创造了：

@media (max-width: 600px) {
   table td {
        float: left;
        width: 50%;
    }
}

这有效，但我仍然会分开两个<tr>相遇的地方。而不是2列5列，我得到一列6和一列4。

请参阅小提琴：https://jsfiddle.net/xjzpaudr/20/

有人知道是否有办法删除<tr>而不影响他们的子元素？

Answer 1

尝试在媒体查询中添加table tr { display: inline; }：

@media (max-width: 600px) {
   table tr { display: inline; }
   table td {
        float: left;
        width: 50%;
    }
}

https://jsfiddle.net/xjzpaudr/21/

Answer 2

虽然我想不出用HTML表格做这个的可能方法，CSS3 Flexbox结合CSS媒体查询可以做到这一点。

这是一个片段，当屏幕大小低于600px时，我将媒体查询设置为分为5行2列（作为示例）

在整页中尝试并在600px下调整浏览器大小以查看结果。

CSS-Tricks网站解释得非常好：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS Flexbox受现代浏览器支持（IE 11，Edge，Chrome，Firefox，Safari，Android，... http://caniuse.com/#search=flexbox）

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  border: 1px solid red;
  height: 50px;
  width: 19%;
  display: inline-flex;
}

@media (max-width: 600px) {
  .item {
    width: 49%;
  }
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

让s表现得像div并忽略s的方法？

2 个答案: