我正在嘗試創建一種靈活的表格布局，其中有一列根本不彎曲。它有足夠的空間容納操作下拉菜單的按鈕。剩余的行應完全占用以下空間，并在需要時截斷。https://codesandbox.io/s/awesome-galois-i70rr?file=/src/App.js我正在 React 應用程序中運行，但我正在使用本機表格元素。雖然我的截斷似乎確實有效，但在一定寬度處似乎存在一個斷點，在該斷點處它只是停止截斷并且表格溢出了正文。從理論上講，除非瀏覽器的寬度小于為按鈕分配的 48px，否則這種情況永遠不會發生，當然這永遠不會發生。其他列應該繼續截斷，而不是在某個隨機斷點處停止。此外，其余的列不會與其內容成比例地彎曲。關于如何解決這兩個問題有什么想法嗎？
1 回答
達令說
TA貢獻1821條經驗 獲得超6個贊
這就是將表格布局與塊/彈性布局結合起來時發生的情況。如果要提交display: flex表行，則還需要將非表布局方法擴展到table和tbody。
更改table和tbody將display: block解決 CodeSandbox 中的問題。
我也會更改thead為塊顯示，作為最佳實踐和一致性，即使您在當前示例中不會看到任何問題，因為每列的最長單元格位于而tbody不是thead. 如果其中一列的列標題比其下方正文中的任何單元格都長，并且您沒有設置thead為阻止顯示，則會遇到類似的問題。
- 1 回答
- 0 關注
- 179 瀏覽
添加回答
舉報
0/150
提交
取消