Question

所以我在html中有一个表，它有两个单元格。我希望这些单元格可以根据浏览器的宽度垂直或水平排列。

我已经尝试过寻找一个DOM功能来完成工作，但到目前为止还没有找到解决方案。

Answer 1

出于这个原因，桌子是糟糕的juju。您应该切换到响应式布局。为此目的有许多图书馆;这是我广泛使用的两个：http://www.responsivegridsystem.com/，http://getbootstrap.com/。

如果您不想使用图书馆，请查看possible dup

以下是我在bootstrap中的表现：

<div class='container-fluid'>
    <div class='row'>
        <div class='col-md-6'>
            Half the page
        </div>
        <div class='col-md-6'>
            Other half
        </div>
    </div>
</div>

Example JSFiddle

Answer 2

不要使用表格。使用div或其他非表格元素，样式为inline-block，宽度固定。

<style type='text/css'>
  .cell {
     display: inline-block;
     width: 200px; /* or whatever */
  }
</style>

<div class='cell'>something</div>
<div class='cell'>else</div>

如果这不适合您，请开始寻找其他responsive design strategies。

Answer 3

您可以使用bootstrap响应表格。
http://getbootstrap.com/css/#tables-responsive

<div class="table-responsive">
   <table class="table">
   ...
   </table>
</div>

只需添加插件，添加如上所示的简单代码即可。

取决于浏览器宽度

3 个答案: