html - 如何在具有特定列大小的 div 中制作一个 html 滚动表？

Question

我正在尝试制作一个允许水平滚动的表格，但即使我在标题中指定了列宽，它也会将它们缩小到 div 大小。

我希望它向右溢出，并允许滚动。

Here is a link to a jsfiddle test与我当前的实现类似，但这里有一个运行相同代码的代码片段:

.mainframe {
  overflow: hidden;
  position: fixed;
  background-color: blue;
  height:200px;
  width:500px;
}
.wrapper {
  margin: 5%;
  width: 90%;
  height: 90%;
  background-color: red;
}

.allow-scroll {
    position: relative;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: scroll;
    background-color: lime;
}

<div class="mainframe">
  <div class="wrapper">
    <div class="allow-scroll">
      <table>
        <tr>
          <th style="width:200px">Long name item 1</th>
          <th style="width:300px">Even longer name item 2</th>
          <th style="width:400px">Super crazy long item 3 need more words</th>
          <th style="width:200px">Short item 4</th>
          <th style="width:300px">Somewhat long time 5</th>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </table>
    </div>
  </div>
</div>

此外，有人可以解释为什么“5% 的利润率”在底部不起作用，我可以做些什么吗？

Answer 1

您可以为表格添加宽度，使其水平滚动。

table {
    width:1400px;
}

更好的选择是使用 table-layout 属性。

table {
    width:100%;
    table-layout:fixed;
}

您遇到的边距问题是由 .mainframe 元素的高度引起的。

删除height: 200px;

如果您需要 .mainframe 元素的高度并且您知道它将是固定高度，您只需降低 .wrapper 元素的高度。您可以使用精确的像素高度。我在下面使用了百分比。

.wrapper { height: 75%; } // This percentage looks about right.