Question

我有一张包裹在div中的表格，需要在移动屏幕上水平滚动。我的那部分工作正常，但是由于某种原因，在表格的右侧，我有一个空白区域，使表格无法延伸到包装div的整个宽度。 Firefox报告该表具有正确的像素宽度，但并未像预期的那样一直扩展。

.m-portlet__body {
  padding: 0;
  position: relative;
}

.m-form {
  overflow: auto;
  min-width: 500px;
}

.table {
  table-layout: fixed;
}

<div class="m-portlet__body">
  <form name="user_notification">
    <table class="table">
      <thead>
        <tr>
          <th></th>
          <th>A</th>
          <th>B</th>
          <th>C</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
        </tr>
        <tr>
          <td>a</td>
        </tr>
        <tr>
          <td>b</td>
        </tr>
        <tr>
          <td>c</td>
        </tr>
      </tbody>
    </table>
  </form>
</div>

空白示例：

报告的包装纸宽度：

报告的表格宽度：

更新表宽度设置为100％：

Answer 1

您是否尝试过将g与应用于表列？

有时候，如果您可以在#jsfiddle或#Codepen上准备演示，则进行故障排除会更容易。

Answer 2

这就是我最终要做的事情：

CSS：

 .m-portlet__body{
    padding: 0;
    position: relative;
    height: 500px;
 }
 .m-form{
    top: 0;
    left: 0;
    overflow: scroll;
    min-width: 600px;
    position: absolute;
 }
 .table{
    table-layout: fixed;
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
    th:first-child{
        width: 350px;
    }
    th{
        width: 100px;
    }

    td{
        width: 100px;
    }
 }

HTML保持不变。

我仍然不知道为什么它不能像其他所有人（和我一样，以代码为准）报告的那样起作用。我检查了每个父元素，并删除了所有异常元素，将其剥离。效果很好，但仍然很奇怪。

表格未延伸div的全宽？

2 个答案: