有啥方法可以让 <tr> 浮动以实现响应式表格布局？

Posted 2023-03-06

【中文标题】有啥方法可以让 <tr> 浮动以实现响应式表格布局？

【英文标题】：Any way to get <tr> to float for a responsive table layout?有什么方法可以让 <tr> 浮动以实现响应式表格布局？

【发布时间】：2015-05-11 07:10:22

【问题描述】：

我很好奇是否有任何方法可以让单元格 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>

所需的布局：

【参考方案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>

【讨论】：

请注意，在旧 IE 版本上使用它可能会遇到奇怪的错误。

@NyamiouTheGaleanthrope IE5x,6 确实教了很多处理 css 和有趣的、意想不到的行为，Ie7 是一个错误，对我来说，这两个已经死了，无论如何都不会在响应式上下文中获得媒体查询。这就是为什么我真的不担心他们;）

@GCyrillus 这看起来很有希望。您对解决方案的浏览器支持有任何想法吗？

@TimRamsey IE8 及更高版本，firefox 1.0 及更高版本，chrome，opera，...实际上任何支持 display:table(css2.1) 的浏览器都可以

@TimRamsey ，它并不完全适用于同一个跨浏览器，因为表格没有重置，tr inline 打破了部分布局但不完全（表格的宽度仍然被继承以将 50% 设置为 td's当 tr 介于两者之间时）。每个浏览器都以自己的方式播放。您可以浮动 td 而不是 inline-block。你可以试试这个：codepen.io/anon/pen/PqdwQo

【参考方案2】：

您正在尝试的实际上是一个非表格布局，您只是使用表格元素。

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

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>

【讨论】：

这不是逐字记录...重点是用 CSS 控制布局，而不是结构上，因为 td 的宽度应该控制每行有多少个单元格。

@TimRamsey：你不能用表格布局来做到这一点，所以如果你想要你必须使用非表格布局。如果您对表格元素执行此操作，则它们的默认设置只会妨碍您。

上面选择的答案显示了如何在我关心的所有现代浏览器中完成此操作。不过感谢您的意见...

@TimRamsey：不，它不能使用表格布局来完成。另一个答案只显示了如何使用表格元素在非表格布局中做到这一点。