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