html - 表列不显示在调整大小

Question

我有三张 table ......第一个表不给margin left.....在接下来的两个表中，我给了 margin-left 以将其稍微移动到左侧....但是当我调整窗口大小时我看不到其他两个表中的最后一列....如何修复它....即使在调整大小后，第一个表看起来也很好......

http://jsfiddle.net/x7HD9/

在下面提供我的代码

<table class="table" style="margin-left: 160px; width: 1759px;">
              <thead>
                <tr class="subBomListHeading subBomHeading" style="">
                  <th>BOM Type</th>
                  <th>Product P/N</th>
                  <th>Version</th>
                  <th>Brand Name</th>
                  <th>BOM Description</th>
                  <th>Generation</th>
                  <th>Version</th>
                  <th>Notes</th>
                  <th>Delete</th>
                </tr>
              </thead>
              <tbody>
                <tr style="background-color: #e5dcd1;" class=" subBom">
                  <td>sub BOM</td>
                  <td>99-00302-00</td>
                  <td>v.02</td>
                  <td>Creative</td>
                  <td>Hardware v1.0 System</td>
                  <td>G1</td>
                  <td>1</td>
                  <td>new</td>
                  <td><input type="radio" name="sex" value="male"></td>
                </tr>
                </tbody>
              </table>

Answer 1

尝试:

<table class="table" style="margin-left: 160px; width: 100%;">

此外，请记住 <tables>不是“响应式”(具有“重新布局”)，但仍然是“可扩展”。

您的表格以最小宽度显示，看不到最后一列是正常的，它会溢出视口(viewport)。