Question

我有这个嵌套表。在一个<td>中，我想要一个可滚动的div。

<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;" border'1px'>
  <thead>
    <tr>
      <th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
      <th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
      <th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
    </tr>                     	
  </thead>
  <tbody>
    <tr style="padding:0px;">
      <td colspan='2' style="padding:0px;">COLUMN 1</td>
      <td style="padding:0px;">
        <div style='width:800px;overflow-x:scroll;'>This DIV should have a large width</div></td>
    </tr>
  </tbody>
</table>

当我将800px插入为div宽度时，它可以正确显示。但是，如果我插入1000px，则显示输出将损坏。理想情况下，我需要5000px ++以下的版本。

Answer 1

我不确定这是否是您想要的。这将始终保持您请求的5000 + px宽度，同时在较小的可滚动div中。（btw溢出-x：自动；表示只在内容实际溢出时才显示滚动条，而不是一直显示）。

<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;" border'1px'>
  <thead>
    <tr>
      <th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
      <th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
      <th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
    </tr>                     	
  </thead>
  <tbody>
    <tr style="padding:0px;">
      <td colspan='2' style="padding:0px;">COLUMN 1</td>
      <td style="padding:0px;">
        <div style='width:800px;overflow-x:auto;'>
          <div style='width:5000px;'>This DIV should have a large width</div>
        </div></td>
    </tr>
  </tbody>
</table>

我希望这会有所帮助：）

Answer 2

我认为您需要将宽度分别设置为25％和75％，因为在您的<thead>中，前两列占25％，第三列为75％。因此，您将其翻译为<tbody>

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
</head>

<body>
  <table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;">
  <thead>
    <tr>
      <th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
      <th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
      <th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
    </tr>
  </thead>
  <tbody>
    <tr style="padding:0px;">
      <td colspan='2' style="padding:0px;width:25% !important;">COLUMN 1</td>
      <td style="padding:0px;">
        <div style='width:75% !important;overflow-x:scroll;position:relative;'>This DIV should have a large width</div>
      </td>
    </tr>
  </tbody>
  </table>
</body>
</html>

如何在a中制作可滚动div？

2 个答案: