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

Question

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

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

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

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

我使用固定列宽和＆＃34; float：left＆＃34;：

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

但是，我希望列宽为＆＃34; 50％＆＃34;，使用所有可用空间，并指定＆＃34; min-width＆＃34;在像素中，尝试了以下内容：

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

但是，这会立即将列放在彼此下方，即使有足够的空间将它们放在一起。我该怎么做呢？

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。