Question

有没有办法在<td>中对齐<tr>，以使每个<td>彼此重叠。我正在寻找一张无法更改为<ul>-<li>的桌子的响应式锻炼。例如，我有一张桌子：

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>

这里1,2和3应该是这样的：

1
2
3

不是

1  2  3.

我尝试了display:block, display:flex，clear: both和float: none但没有效果。如果知道有办法，请告诉我。

Answer 1

如果是表，我们无法将其从css中删除为td或者取决于cay，或者取决于nay屏幕大小。

对你而言你必须使用css表。

喜欢

<div id="table">
  <div calss="table-cell">1<div>
  <div calss="table-cell">2<div>
  <div calss="table-cell">3<div>
</div>

CSS

#table{
    display:table;
}
#table div{
    display:table-cell;
}
@media only screen and (max-width: 800px) {

  #table{
      display:block;
  }
  #table div{
      display:block;
      float:none;
  }

}

现在在桌面或更大的800px屏幕上，它应显示为表

喜欢

1 2 3

并且屏幕宽度小于800px它应该像这样显示;

1
2
3

您可以根据需要扩展此媒体查询。我希望你的问题得到回答。感谢

Answer 2

获得此类输出

1
2
3

您可以为每个TD代码添加style='float: left;width: 100%;'。

Answer 3

这实现了你想要的吗？

CSS：

@media (max-width: 400px) {
    td {
        display: block;
        clear:left;
    }
}

Fiddle此处。

Answer 4

这是你在找什么？ http://jsfiddle.net/1w7arzmm/

td{
float:left;
display:block;
clear:left;
}

垂直对齐以便响应

4 个答案: