我正在尝试创建一个灵活的表格布局，其中有一列根本不灵活。它有足够的空间来容纳一个用于操作下拉菜单的按钮。其余行应完全占用以下空间并在需要时截断。
https://codesandbox.io/s/awesome-galois-i70rr?file=/src/App.js
我在一个 React 应用程序中运行，但我正在使用本机表格元素。虽然我的截断似乎确实有效，但在一定宽度上似乎有一个断点，在该断点处它只是停止截断并且表格溢出了正文。从理论上讲，除非浏览器的宽度小于为按钮分配的 48px，否则这种情况永远不会发生，当然这绝不会发生。其他列应继续截断，而不是在某个随机断点处停止。此外，其余列不会与其内容成比例地弯曲。关于如何解决这两个问题的任何想法？
【问题讨论】：
标签： html css reactjs html-table flexbox
当您将表格布局与块/弹性布局结合使用时会发生这种情况。如果要在表格行上提交display: flex，则需要将非表格布局方法扩展到table 和tbody。
将 table 和 tbody 更改为 display: block 将解决 CodeSandbox 中的问题。
我还将更改 thead 以阻止显示，作为最佳实践和一致性，即使您在当前示例中不会看到任何问题，因为每列的最长单元格在 @ 987654330@ 而不是thead。如果其中一列的列标题比其下方正文中的任何单元格都长，如果您不同时将 thead 设置为阻止显示，则会遇到类似的问题。
【讨论】：
tr 是 display: table-row 而tbody 是 display: table-row-group）。老实说，我不知道为什么事情最终会在给定某些确切内容的情况下以某个确切的宽度破裂，只是在实践中，表格上的非用户代理 display 方法不能很好地与默认值，所以如果你改变一个，你必须改变它们。
flex: 1 1 auto 而不是flex: 1 1 0%，但这也可能无法满足您的需求。如果您的真实内容不如您的示例那么引人注目，那可能还可以。您可以尝试将其与min-width 结合使用，但老实说，我认为这是其中没有一种很棒的纯 CSS 方式来做事情的领域之一，这些事情总是只会在绝对必要时截断。您可能正在寻找 JS 来寻找完美的解决方案。
max-width: 0 获取第一列中的单元格。见stackoverflow.com/questions/9789723/…。 （诚然，这在逻辑上毫无意义；就像我说的，表格很奇怪 :)）