html - 通过仅具有 强制 HTML 表格宽度

Question

我想强制我的 HTML 表格具有宽度，方法是只为每一列设置宽度。

我现在拥有的是下面的代码。我删除了一些不适用的其他代码。它没有正确溢出，表格仅在我屏幕的 100% 宽度处呈现。

#example_table {
  border-collapse: collapse;
  table-layout: fixed;
}

.zui-wrapper {
  position: relative;
}

.zui-scroller {
  overflow-x: scroll;
  overflow-y: visible;
  width: 100%;
}

<div class="zui-wrapper">
  <div class="zui-scroller">
    <table id="example_table">
      <thead>
        <tr>
          <th style="width: 75px;">Col1</th>
          <th style="width: 50px;">Col2</th>
          <th style="width: 200px;">Col3</th>
          <th style="width: 70px;">Col4</th>
          <th style="width: 70px;">Col5</th>
          <th style="width: 70px;">Col6</th>
          <th style="width: 70px;">Col7</th>
          <th style="width: 100px;">Col8</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ex1</td>
          <td>Ex2</td>
          <td>Ex3</td>
          <td>Ex4</td>
          <td>Ex5</td>
          <td>Ex6</td>
          <td>Ex7</td>
          <td>Ex8</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

我还尝试将 width="xx"添加到每一行。我不想在 #example_table CSS 下使用 width="xx"，因为我有一个隐藏某些行的 javascript 代码，完成后，表格示例的宽度相同。

我还在不同的类/ID 中尝试了许多不同的溢出 CSS 组合。非常感谢任何帮助!

Answer 1

您可以使用 <colgroup>以精确列的宽度。这是一个例子:

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-style: solid;
  border-width: 1px;
}

.tg th {
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
}

<table class="tg" style="undefined;table-layout: fixed; width: 700px">
  <colgroup>
    <col style="width: 75px">
    <col style="width: 50px">
    <col style="width: 200px">
    <col style="width: 70px">
    <col style="width: 70px">
    <col style="width: 70px">
    <col style="width: 70px">
    <col style="width: 100px">
  </colgroup>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
    <th>Col4</th>
    <th>Col5</th>
    <th>Col6</th>
    <th>Col7</th>
    <th>Col8</th>
  </tr>
  <tr>
    <td>Ex1</td>
    <td>Ex2</td>
    <td>Ex3</td>
    <td>Ex4</td>
    <td>Ex5</td>
    <td>Ex6</td>
    <td>Ex7</td>
    <td>Ex8</td>
  </tr>
</table>