有什么方法可以让 <tr> 浮动以实现响应式 table 布局？

Question

我很好奇是否有任何方法可以让单元格 4 漂浮在单元格 3 旁边？

我不想考虑非表格解决方案（请不要建议，因为我知道如何去做）。我只是好奇请求是否可以逐字完成。

感谢任何可以提供任何意见的 HTML/CSS 专家。

table{
    width:100%;
    table-layout:fixed;
    max-width:500px;
}
td{
    width:50%;
    display:inline-block;
    margin:0;
    padding:0;
}

<table>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
<tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
</tr>
</table>

所需布局：

Answer 1

您还需要重置 <tr> 显示。

table{
    width:100%;
    table-layout:fixed;
    max-width:500px;
}
tr {
    display:inline;
    font-size:0;/* kind of erase white-space */
}
td{
    width:50%;
    display:inline-block;
    margin:0;
    padding:0;
    font-size:1rem/* reset font-size*/;
      /* show me*/ box-shadow: 0 0 0 1px;
}

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

Answer 2

您尝试的实际上是一个非 tabled 布局，您只是使用了 table 个元素。

要使 table 布局看起来像那样，请在每行中放置两个单元格：

table{
    width:100%;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

有什么方法可以让 <tr> 浮动以实现响应式 table 布局？

Any way to get <tr> to float for a responsive table layout?

html

css

responsive-design

css-float