如何在HTML页面的右侧创建小表

时间:2016-08-26 13:31:33

标签: html css twitter-bootstrap

我正在尝试在HTML页面的右侧创建一个最小宽度的两列html表。

目前的想法:

  • 我应该在我的值前面创建第三列,并以某种方式最大化其宽度,将两个紧凑的列一直向右移动?

  • 我应该将整个表格包裹在<div>并使用正确的理由吗?

  • 我正在使用Bootstrap CSS,使用JS类有更简单的方法吗?

提前谢谢你,

<table cellspacing="0" class="table table-bordered">
      <tr>
        <td>SPACER</td>
        <td>PRICE UPDATE: </td>
        <td>{{price_update}}</td>
      </tr>
      <tr>
        <td>SPACER</td>
        <td>POSITION UPDATE: </td>
        <td>{{pos_update}}</td>
      </tr>
    </table>

1 个答案:

答案 0 :(得分:1)

对引导网格系统的一点阅读可能有所帮助(http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works)。

您可以使用偏移量和列来轻松完成此操作。例如:

<div class="col-xs-offset-9 col-xs-3">
<!-- insert table here -->
</div>

Bootstrap工作在12s(这就是你需要9的偏移量,或者任何会偏移你需要的列大小的原因)。 xs是您希望在其上显示的屏幕尺寸,因此在这种情况下,xs将显示在每个屏幕尺寸的右侧,但如果您希望它仅显示在iPad或PC上您必须更改它,然后您可以添加您希望它显示给较小设备的方式。

还要确保将所有列放在容器和行中。