Question

我有以下html页面。

#dash-board-container {
  height: 100%;
  width: 100%;
}

.quote_list_container {
  max-height: 100%;
  max-width: 100%;
  overflow: auto;
}

table {
  table-layout: fixed;
  white-space: nowrap;
  width: 100%;
}

tr td {
  border: solid 1px #000;
  white-space: nowrap;
  overflow: hidden;
  min-width: 100px;
}

tr th {
  overflow: hidden;
  white-space: nowrap;
  border: solid 1px #000;
  min-width: 100px;
}

<!DOCTYPE html>
<html>
  <body>
    <div id="dash-board-container">
      <div class="quote_list_container">
        <table>
          <colgroup>
            <col width="300" />
            <col width="100" />
            <col width="100%" />
          </colgroup>
          <thead>
            <tr>
              <th>Names</th>
              <th>Names</th>
              <th>Names</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>ggggggggg</td>
              <td>ggggggggg</td>
              <td>ggggggggg</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

当我向左侧调整窗口大小时，最后一列的宽度为0px，然后，如果我继续调整大小，则会开始滚动。将最后一列宽度设置为100％用于防止在表调整大小时调整其他列的大小。

如何防止最后一列崩溃？而不是我想最小化最后一列只适合内容宽度，然后开始滚动。

Answer 1

您需要做的就是将“tr td”上的溢出设置为“自动”（启用滚动）。然后只选择整个表的最小宽度（以防止调整大小）。我选择了700px（300 + 100 + 300）的宽度。

请参阅下面的代码以获取工作示例。

#dash-board-container {
            height: 100%;
            width: 100%;
        }

        .quote_list_container {
            max-height: 100%;
            max-width: 100%;
            overflow: auto;
        }

        table {
            table-layout: fixed;
            width: 700px;
        }

        tr td {
            border: solid 1px #000;
            overflow: auto;
            white-space: nowrap;
            overflow: hidden;
            max-width: 300px;
        }

        tr th {
            overflow: hidden;

            white-space: nowrap;
            border: solid 1px #000;
            min-width: 100px;
        }

        table td + td + td {
         width:300px;
        }

<!DOCTYPE html>
<html>

<body>
<div id="dash-board-container">
    <div class="quote_list_container">
        <table>
            <colgroup>
                <col width="300"/>
                <col width="100"/>
                <col width="300"/>
            </colgroup>
            <thead>
            <tr>
                <th>Names</th>
                <th>Names</th>
                <th>Names</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>ggggggggg</td>
                <td>ggggggggg</td>
                <td>ggggggggg</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

html - 如何在调整大小时防止表列崩溃？

1 个答案: