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

Question

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

列宽始终相等
列宽与最宽列所需的空间一样宽，但其单元格内容不会超出列（例如，包含一个带有长 label 和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 来实现这一目标？

Answer 1

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

Answer 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;
  }

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

问题描述

2 个解决方案

解决方案1
0 2022-07-27 09:37:57

解决方案2
0 2022-07-27 10:04:08

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

问题描述

2 个解决方案

解决方案1 0 2022-07-27 09:37:57

解决方案2 0 2022-07-27 10:04:08

解决方案1
0 2022-07-27 09:37:57

解决方案2
0 2022-07-27 10:04:08