Question

enter image description here 我有三张桌子...... 第一张表没有给出保证金..... 在接下来的两张桌子中，我给了左边的左边稍微移动它...... 但是当我调整窗口大小时，我无法看到其他两个表中的最后一列.... 如何解决它.... 即使在调整大小后，第一张表看起来也很好......

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>不是＆＃39;响应＆＃39; （已经重新布局＆＃39;），但仍然可以扩展＆＃39;。

您的表格显示在其最小宽度，正常情况下您看不到最后一列，它会溢出视口。

Answer 2

我假设您在桌子上设置width: 100%，这就是您的问题，它们被设置为窗口的宽度然后向右移动，因此您无法看到最后一列，您应该将宽度更改为较低的价值。

Answer 3

对我来说，即使尝试理解也有太多的CSS。我认为只从一个表开始，然后逐渐添加CSS将是一个好主意。

Answer 4

这里有几个问题。

首先，您已经为表定义了固定宽度。根据溢出属性在祖先元素上的设置方式，它可能会导致您描述的裁剪，因为该元素对于该空间来说太宽。目前还不清楚你想要这些元素有多宽，但是像这样的东西可以解决这个问题：

table.brown {
    min-width: 80%; /* or just plain `width: 80%` */
}

最终，您将无法调整大小，因为表格的内容根本不允许。一旦您的单元格缩小到1个字宽，那么您无法在不添加word-break: break-all的情况下帮助更长的单词，例如“说明”。

其次，如果要将其推向特定方向，则需要为边距使用不同的设置。使用 auto 作为margin-left的值会导致元素一直向右移动。

table.brown {
    margin-left: auto;
}

http://jsfiddle.net/x7HD9/3/

表格列不会显示在调整大小中

4 个答案: