iT邦幫忙

0

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

下圖是我的html(JSX)
https://ithelp.ithome.com.tw/upload/images/20210515/20120934ZltGFLswYZ.jpg
然後跑出來長這樣
前三排只有Patient ID跑版
最後一排不知道為什麼全部跑版
原本好像會照著width的設定來排
但我在td裡面加了一些div、input之類的之後
它就開始不聽話了?嗚嗚
有人可以指點一下嗎?
https://ithelp.ithome.com.tw/upload/images/20210515/20120934jKko5iWOeL.jpg

table跟"跑版"一直是成雙成對,一起出現(特別是在手機上)
我都棄用table改用css table,雖不完美但至少可控
display: table , table-row ,teble cell
或乾脆全套用bootstrap
用colgroup定義table內每一個col的width,再去合併表格
但某些情況下還是會失效
我也是建議用css table
除非很單純且就只需顯示在web上
方便帶來的就是部分不可控
所有的 td 要給 STYLE padding: 1px; height:1em;
所有的文字要用 DIV 包,要給 STYLE width: 100%; overflow: hidden;
這樣試看看,建議 CSS 歸零要做,很多都是預設值搞鬼

2 個回答

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

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

0

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

這是tagle的優點也是缺點。

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

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

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

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

我要發表回答

立即登入回答