没有固定宽度的 HTML 表格，所有列的宽度都是最大列的宽度（没有 JS）答案

【问题标题】：HTML Table with no fixed width and all columns the width of largest column (without JS)没有固定宽度的 HTML 表格，所有列的宽度都是最大列的宽度（没有 JS）
【发布时间】：2022-07-27 18:04:08
【问题描述】：

是否有可能有一个表格，其中以下所有内容都是正确的：

列宽始终相等
列宽与最宽列所需的空间一样宽，但其单元格内容不会超出列（例如，包含带有长标签和white-space: nowrap 的按钮）。
表格可以任意宽（因此没有固定的宽度、百分比或绝对值）。

table-layout: fixed 似乎处理了相等的列，但需要表格的宽度，并且只考虑第一行单元格的宽度。切换到 `table-layout: auto 会导致列宽不均匀（并且为列设置百分比宽度没有任何效果）。

table {
  border-collapse: collapse ;
}

th, td {
  outline: 1px solid black;
  padding: 5px;
}

.tableWrapper {
  max-width: 600px;
}

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

.tableFixedWithPercentageWidths {
  th, td {
    min-width: 33.33%;
  }
}

button {
  white-space: nowrap;
}

<div class=\"tableWrapper\">
  <h4>Auto</h4>
  <table>
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
      <th>Charlie</th>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td><button>This is a really long button label</button></td>
    </tr>
  </table>
  <h4>Fixed</h4>
  <table class=\"tableFixed\">
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
      <th>Charlie</th>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td><button>This is a really long button label</button></td>
    </tr>
  </table>
  <h4>Auto with percentage cell widths</h4>
  <table class=\"tableFixedWithPercentageWidths\">
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
      <th>Charlie</th>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td><button>This is a really long button label</button></td>
    </tr>
  </table>
  <h4>Fixed with percentage cell widths</h4>
  <table class=\"tableFixed tableFixedWithPercentageWidths\">
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
      <th>Charlie</th>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td><button>This is a really long button label</button></td>
    </tr>
  </table>
</div>

是否可以单独使用 CSS 来实现这一点？

标签： html css html-table

【解决方案1】：

如果您不想使用任何专有的<table> 功能，可以使用 css grid。（即，如果您只关心外观）。

【讨论】：

【解决方案2】：

这是你想要的吗？

HTML：

<html>
<body>
    <div class="tableWrapper">
        <h4>Mine</h4>
        <table>
          <tr>
            <th>Alpha</th>
            <th>Bravo</th>
            <th>Charlie</th>
          </tr>
          <tr>
            <td>Alpha</td>
            <td>Bravo</td>
            <td>Charlie</td>
          </tr>
          <tr>
            <td>Alpha</td>
            <td>Bravo</td>
            <td>Charlie</td>
          </tr>
          <tr>
            <td>Alpha</td>
            <td>Bravo</td>
            <td><button>This is a really long button label yessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</button></td>
          </tr>
        </table>
        
        </table>
      </div>
</body>
</html>

CSS：

table {
    /* border-collapse: collapse ; */
    overflow-x: scroll;
    min-width:max-content;
  }
  
  th, td {
    outline: 1px solid black;
    padding: 5px;
    width: 33%;
  }
  
  button {
    white-space: nowrap;
  }

【讨论】：