示例：流体容器

Question

我有一个用HTML编写的表格，我试图在移动设备上很好地显示。

表格100％由图像组成，因为如果图像位于表格中，它们很容易定位（这是一个难题，因此定位很痛苦）。

现在，在我得到一些人建议我应该废弃桌子并使用不同的格式化这些图片的方法之前 - 谢谢，但我真的很想在完全重写之前让它工作。我完全理解这个建议，我肯定会改变它，但是现在我只需要让这个特定方法起作用。

所以基本上，桌子（看起来像一张完整的图片）总是把它自己放在移动页面的右上角 - 这里是截图（裁剪出来的网址）http://imgur.com/r0ow5mc

我使用CSS类来定位行和列，但即使更改它们也不会改变任何内容。

以下是代码（从<meta>代码开始，以</div>代码结尾） -

<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>!!!!!</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
<div class="table-responsive">
            <table width="100%" id="table" border="0" cellpadding="0" cellspacing="5" align="center">
                <tr>
                    <td id="one">
                        <img src="1.png" class="merge0">
                    </td>
                    <td id="two">
                        <img id="2" src="6.png" class="merge">
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td id="three">
                        <img src="4.png" class="row1">
                    </td>
                    <td id="four">
                        <img src="2.png" class="merge1">
                    </td>
                    <td id="five">
                        <img src="7.png" class="merge2">
                    </td>
                </tr>
                <tr>
                    <td id="six">
                        <img src="8.png" class="row2">
                    </td>
                    <td id="seven">
                        <img src="5.png" class="row3">
                    </td>
                    <td id="eight">
                        <img src="3.png" class="row4">
                    </td>
                </tr>
            </table>
        </div>

我很感激任何建议，我真的很困惑为什么这只是不能填满我的屏幕。

提前致谢，

-M

Answer 1

阅读bootstrap doc

示例：流体容器

将最外面的.container更改为.container-fluid.

，将任意固定宽度的网格布局转换为全宽布局

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

http://getbootstrap.com/css/#grid

也是移动和桌子并不是彼此相辅相成的......

Answer 2

这是我发现的响应表。它应该做的伎俩。 http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table

使用Bootstrap在div / table中填满整个屏幕

2 个答案:

示例：流体容器