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>

通过仅具有<td witdth>来强制HTML表宽度

1 个答案: