iT邦幫忙

0

有沒有可能突破HTML Table的td colspan限制?

Cian 2016-09-05 09:11:085265 瀏覽

是這樣的, 因為公司的需求

多數表單想以傳統table呈現, 有點像是傳統文件的那種樣式

但表單設計人員完全跟網頁設計不相干

他們不懂一些設計上的限制, 因此總會畫出很不規則得表格

也就是每一個row的cell數目很亂, 且寬度很隨性

單純使用table來實現實在很頭痛

因此小弟目前使用div來達成, 但感覺作法不是那麼的好

在想是否有可能突破colspan來畫表格呢?

看更多先前的討論...收起先前的討論...
fillano iT邦超人 1 級 ‧ 2016-09-05 09:33:01 檢舉
看你怎麼用div吧?有搭配一些css grid system來做嗎?
Cian iT邦新手 5 級 ‧ 2016-09-05 09:39:23 檢舉
原本想用文字表達, 但連我自己都看不懂
在此還是附上主要的實踐代碼區塊來表示

.table {
width:100%;
border: 1px solid #000;
}

.tr {
border-bottom: 1px solid #000;
background-color: #f8f8f8;
}

.table .tr:last-child {
border-bottom: 0;
}

.col {
display: table-cell;
padding: 5px;
border-right: 1px solid #000;
min-height:30px;
vertical-align:middle;
text-align: center;
}

.tr .col:last-child {
border-right: 0;
}
Cian iT邦新手 5 級 ‧ 2016-09-05 09:42:42 檢舉
這樣做的好處是我不用再擔心colspan的問題
但相對的我得仔細地控制每個 col的寬度 讓他盡可能好看
所以感覺做法沒那麼得俐落, 不知道有無更好的方式來實現這個需求?
Cian iT邦新手 5 級 ‧ 2016-09-05 09:44:43 檢舉
補充一下:以上的class都是套用在div上 類似
<div class="table">
<div class="tr">
<div class="col">測試</div><div class="col"><input type="text"></div>
/<div>
</div>
建議導入 bootstrap 之類的來做會比較快,
既然欄位很隨興,那麼不用bootstrap 這種已經將網格定義好的套件
完全靠自己寫,之後套用很容易表格會在某些狀況下亂掉
還有,也沒必要堅持非用 div,除非你表格內的資料需要被搜尋引擎索引
否則用 table 是最保險的,基本上最簡單用的類表格標籤當屬 ul 無序標籤
這各很好用,行列都能視為單一清單,透過清單水平或垂直的排列
單一表格內也能在插入清單,會比 div 更具彈性,如果你希望 ul 清單項目具備 div 的特性
直接下 css 給 清單項目即可,用 ul 清單標籤 你可以很簡單的做出你要的表格
Cian iT邦新手 5 級 ‧ 2016-09-05 11:13:15 檢舉
感覺用無序ul真的是一個很好的方式
感謝大大提醒我居然沒有想到,真的個好方法
非常感謝您!
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
海綿寶寶
iT邦大神 1 級 ‧ 2016-09-05 09:43:39

這樣子的問法沒有什麼幫助

建議你拿出一兩個「你覺得很麻煩」的表格
不要自以為聰明刪刪改改
也不要加油添醋
然後「寫出你的做法(和困難點)」
再問「更好的做法是什麼」
這樣才不會浪費彼此時間
/images/emoticon/emoticon33.gif

看更多先前的回應...收起先前的回應...

真快, 已經貼出 code 了
/images/emoticon/emoticon12.gif

Cian iT邦新手 5 級 ‧ 2016-09-05 09:48:09 檢舉

抱歉, 小弟很菜 code寫不久, 也才剛加入這個社群
有些發問交流的眉角還沒抓到, 懇請見諒 /images/emoticon/emoticon33.gif

不會不會
跟有些自以為是老手的新手比起來
你的方式已經問對了
/images/emoticon/emoticon12.gif

賽門 iT邦超人 1 級 ‧ 2016-09-05 13:07:53 檢舉

自以為是老手的新手

海綿寶寶要不要講更明確點,一堆邦友等著對號入座吶....

/images/emoticon/emoticon39.gif

講更明確點

我才不會中你的計呢
/images/emoticon/emoticon68.gif

就決定是你了 !

去吧 XD

0
daimom
iT邦新手 2 級 ‧ 2016-09-05 10:21:13

要不要考慮用bootstrap來做表格?

Cian iT邦新手 5 級 ‧ 2016-09-05 10:37:14 檢舉

其實我也是習慣用bootstrap的,只是因為老闆想要
這種風格
的表格, 所以用bootstrap來做似乎不太合適

既然本來就是word文件,怎不考慮直接秀出word就好,然後再用word COM抓值
雖然效率慢但是絕對美觀

1
fillano
iT邦超人 1 級 ‧ 2016-09-05 10:35:38

先轉agito723大大的鐵人賽文章:淺談CSS Grid system ,你可以考慮使用現成的css grid system,或是依照需求自定。(用這關鍵字上google查,結果應該多到看不完的)

另外,表單設計人員怎麼設計表單?有使用工具嗎?也許可考慮叫他們用Excel來畫出表單,如果用Excel畫不出來就退件XD

Cian iT邦新手 5 級 ‧ 2016-09-05 10:39:55 檢舉

原來還有這招, 感覺可以溝通看看
謝謝您的建議~~/images/emoticon/emoticon08.gif

懶惰點

Credit

打錯

是ckedit

0
wilson1966
iT邦研究生 2 級 ‧ 2016-09-06 12:22:46

建議用頁箋 控件,將表格分成幾個大項,各放在專用的頁箋裡,這樣較清楚也比較好設計

我要發表回答

立即登入回答