为小型显示器显示彼此下方的表格列（响应式布局）

Posted 2023-03-05

【中文标题】为小型显示器显示彼此下方的表格列（响应式布局）

【英文标题】：Displaying table columns below of each other for small displays (responsive layout)

【发布时间】：2015-09-06 13:47:55

【问题描述】：

我有一个包含两列的表格：

------------- |一个 |乙| -------------

我的浏览器宽度对于这个布局来说太小了，它应该切换到这个布局：

------------- |一个 | ------------- |乙| -------------

我让它在固定列宽和“float:left”下工作：

<table style="width: 100%;">
    <tbody>
        <tr>
            <td style="width: 300px; float: left; border: 1px solid black;">This is column 1</td>
            <td style="width: 300px; float: left; border: 1px solid black;">This is column 2</td>
        </tr>
    </tbody>
</table>

但是，我希望列宽为“50%”，使用所有可用空间，并以像素为单位指定“最小宽度”，尝试了以下操作：

<table style="width: 100%;">
    <tbody>
        <tr>
            <td style="width: 50%; min-width: 200px; float: left; border: 1px solid black;">This is column 1</td>
            <td style="width: 50%; min-width: 200px; float: left; border: 1px solid black;">This is column 2</td>
        </tr>
    </tbody>
</table>

但是，这会立即将列置于彼此下方，即使有足够的空间将它们彼此相邻放置。我能做些什么呢？

【参考方案1】：

您可以使用来自 css 的媒体查询，您可以在其中为特定宽度定义一个新 css...

http://www.w3schools.com/cs-s-ref/tryit.asp?filename=trycss3_media_example1

你可以看到一个例子。

http://jsbin.com/xozipinila/edit?html,css,output

你可以在这里看到工作演示，我使用的是 div 而不是 table。

【讨论】：

Anirudh，还有一件事......我只是想将它与我的网页集成，并注意到一旦您将更多内容添加到一列（多行），两列不会垂直对齐适当地。我想要一个顶部对齐...有什么办法吗？

没关系，我想通了：添加“vertical-align:top;”到孩子的风格