td 表格排版最後一行width無效?!

html td width jsx

leooel97895750 2021-05-15 23:48:59 ‧ 1748 瀏覽

下圖是我的html(JSX)

然後跑出來長這樣
前三排只有Patient ID跑版
最後一排不知道為什麼全部跑版
原本好像會照著width的設定來排
但我在td裡面加了一些div、input之類的之後
它就開始不聽話了?嗚嗚
有人可以指點一下嗎?

japhenchen iT邦超人 1 級 ‧ 2021-05-17 09:26:42 檢舉

table跟"跑版"一直是成雙成對，一起出現(特別是在手機上)
我都棄用table改用css table，雖不完美但至少可控
display: table , table-row ,teble cell
或乾脆全套用bootstrap

archer9080 iT邦研究生 3 級 ‧ 2021-05-17 10:40:40 檢舉

用colgroup定義table內每一個col的width，再去合併表格
但某些情況下還是會失效
我也是建議用css table
除非很單純且就只需顯示在web上
方便帶來的就是部分不可控

窮嘶發發發 iT邦高手 1 級 ‧ 2021-05-17 11:20:30 檢舉

所有的 td 要給 STYLE padding: 1px; height:1em;
所有的文字要用 DIV 包，要給 STYLE width: 100%; overflow: hidden;
這樣試看看，建議 CSS 歸零要做，很多都是預設值搞鬼

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

小魚

iT邦大師 1 級 ‧ 2021-05-16 22:17:50

他基本上是根據colspan來處理,
你真的要這樣乾脆每一行都一個獨立的table...
或是同樣格式的放同一個table.

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2021-05-17 09:31:17

table相關的元件。其設定的 width 都只是預設指定值。
也就是當內置元件並未將其撐大的情況下。
有時並不是當下的內部元件被撐大造成的。而是其它定義的相隨TD撐大造成的。

這是tagle的優點也是缺點。

近年來，前端設計師，已經不會在用table來做排板了。就是因為tagle這樣的特性
來去造成破板。

我個人目前也沒在用tagle。只會利用在報表相關的。其它地方大多還是利用DIV來處理

froce iT邦大師 1 級 ‧ 2021-05-17 16:33:13 檢舉

另外一方面是SEO啦，你不正確使用 html tag 會被扣分，table就該是表格。

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

IT邦幫忙

td 表格排版 最後一行width無效?!