標籤：

如何解決table標籤和col標籤的一系列問題?

02-01

我想用一個列表布局輸出一系列信息，第一列是序號，第二列是圖片，第三列要求文本左對齊。第四列是鏈接按鈕。

我的代碼如下：

&

&

&

&

&

&

&1&&&&&

我是一個字元串&&&KKKK&&

&

&

問題1：我注意到h5不支持col標籤中的align屬性定義左對齊，可是我寫在style里也不起作用，如何實現？難道非得在每個th標籤里加style="text-align: left"嗎？

問題2：我查到其他的解決方案是給第三個col添加左浮動的樣式，可是這樣一來第三列第四列的大小又變了，第四列的位置也變了..........

問題3：是不是這種布局最好不要用table標籤來實現？我看到很多類似的布局都是用各種div、設浮動實現的。但是table比起他們來說有自動垂直居中、排布簡單的優點，又讓我不忍放棄...

謝邀。

首先，CSS Selectors 4 可以這樣：

col.left-aligned || td { text-align: left }

或

td:nth-column(odd) { text-align: left }

不過目前為止（2016年4月），沒有任何一款瀏覽器支持「||」combinator和nth-column偽類等特性。

下面談點歷史：

之所以直接在 col 上定義樣式無效，是一個老問題了。實際上HTML4定義的col上的align屬性在現代瀏覽器上從來沒有得到過良好支持（只有始於CSS時代之前的IE支持），原因很簡單，因為此設計在CSS1、2乃至3的機制中都無法實現。

按照CSS的模型，一個元素上的CSS樣式值要麼來自於匹配了自己的規則，要麼來自於匹配了祖先元素的規則然後通過繼承獲得。所以一個cell（td/th）的text-align，要麼來自於匹配td/th的規則，要麼來自於tr,tbody,table等祖先元素。而col/colgroup不可能是其祖先元素。

因此儘管這個需求被開發者要求了十多年，但是始終未能滿足。最終還是需要通過更新CSS規範，創造新的combinator和偽類來實現。

下面談你這個需求：

一、table元素應該用於真的表格，所謂真的表格即二維數據表。從你的需求來看，其實並不像是真的數據表。因此不建議用table元素。

二、其實你可以使用 nth-child 來實現你要的效果。

以上。

推薦閱讀：

TAG:前端開發 | CSS | HTML5 |