iT邦幫忙

0

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

html css 網頁設計 前端
Cian 2016-09-05 09:11:08 ‧ 5407 瀏覽

  • 分享至 

  • xImage

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

多數表單想以傳統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>
窮嘶發發發 iT邦高手 1 級 ‧ 2016-09-05 11:05:27 檢舉
建議導入 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) }}
直播中

4 個回答

1
海綿寶寶
iT邦大神 1 級 ‧ 2016-09-05 09:43:39

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

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

看更多先前的回應...收起先前的回應...
海綿寶寶 iT邦大神 1 級 ‧ 2016-09-05 09:45:11 檢舉

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

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

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

海綿寶寶 iT邦大神 1 級 ‧ 2016-09-05 10:14:14 檢舉

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

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

自以為是老手的新手

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

/images/emoticon/emoticon39.gif

海綿寶寶 iT邦大神 1 級 ‧ 2016-09-05 17:22:32 檢舉

講更明確點

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

林門神JanusLin iT邦超人 1 級 ‧ 2016-09-08 08:29:41 檢舉

就決定是你了 !

去吧 XD

登入發表回應
0
daimom
iT邦新手 2 級 ‧ 2016-09-05 10:21:13

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

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

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

liurambo0911 iT邦高手 1 級 ‧ 2016-09-06 01:56:14 檢舉

既然本來就是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

炎之虛空 iT邦高手 3 級 ‧ 2016-09-06 07:30:51 檢舉

懶惰點

Credit

炎之虛空 iT邦高手 3 級 ‧ 2016-09-06 07:31:55 檢舉

打錯

是ckedit

登入發表回應
0
wilson1966
iT邦研究生 1 級 ‧ 2016-09-06 12:22:46

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

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22217 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙