我正在嘗試創(chuàng)建一種靈活的表格布局,其中有一列根本不彎曲。它有足夠的空間容納操作下拉菜單的按鈕。剩余的行應(yīng)完全占用以下空間,并在需要時(shí)截?cái)唷ttps://codesandbox.io/s/awesome-galois-i70rr?file=/src/App.js我正在 React 應(yīng)用程序中運(yùn)行,但我正在使用本機(jī)表格元素。雖然我的截?cái)嗨坪醮_實(shí)有效,但在一定寬度處似乎存在一個(gè)斷點(diǎn),在該斷點(diǎn)處它只是停止截?cái)嗖⑶冶砀褚绯隽苏摹睦碚撋现v,除非瀏覽器的寬度小于為按鈕分配的 48px,否則這種情況永遠(yuǎn)不會發(fā)生,當(dāng)然這永遠(yuǎn)不會發(fā)生。其他列應(yīng)該繼續(xù)截?cái)啵皇窃谀硞€(gè)隨機(jī)斷點(diǎn)處停止。此外,其余的列不會與其內(nèi)容成比例地彎曲。關(guān)于如何解決這兩個(gè)問題有什么想法嗎?
1 回答

達(dá)令說
TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超6個(gè)贊
這就是將表格布局與塊/彈性布局結(jié)合起來時(shí)發(fā)生的情況。如果要提交display: flex
表行,則還需要將非表布局方法擴(kuò)展到table
和tbody
。
更改table
和tbody
將display: block
解決 CodeSandbox 中的問題。
我也會更改thead
為塊顯示,作為最佳實(shí)踐和一致性,即使您在當(dāng)前示例中不會看到任何問題,因?yàn)槊苛械淖铋L單元格位于而tbody
不是thead
. 如果其中一列的列標(biāo)題比其下方正文中的任何單元格都長,并且您沒有設(shè)置thead
為阻止顯示,則會遇到類似的問題。
- 1 回答
- 0 關(guān)注
- 175 瀏覽
添加回答
舉報(bào)
0/150
提交
取消