显示 table 列，用于小型显示（响应式布局）

Question

我有一个包含两列的 table：

-------------
|  A  |  B  |
-------------

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

-------------
|     A     |
-------------
|     B     |
-------------

我得到它来使用固定列宽和 "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%”，使用所有可用的 space，并以像素为单位指定 "min-width"，尝试了以下操作：

<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>

但是，这会立即将各列置于彼此之下，即使有足够的 space 将它们并排放置。我可以做什么？

Answer 1

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

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_example1

你可以看到它的一个例子。

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

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