精美的表格是前端開發用到的一個組件,很多時候我們利用復雜的頁面style代碼,來生成這樣的表格,造成了頁面的修改性和可讀性都非常差。這里推薦直接使用css來產生一個細線表格。
使用方法也很簡單:
第一:導入table.css
第二:套用格式
您只需要給table設置樣式class="table"即可,不需要對任何的tr,td做操作。您也可以寫成<table class="table" style="width:600px"> style="width:600px"是為了更靈活的控制表格的寬度,如果直接寫到table.css里自然也沒有問題;如果您打算讓td有有背景顏色,只需要設置td的樣式class="color"即可。當然其實可以在css里面利用表達式直接設置成隔行變色,不過那樣做會降低頁面的效率,不推薦在css中使用表達式。
如果大家想對樣式進行微調,只需要調整table.css即可,不需要改任何的頁面html代碼。如果大家想修改邊框的顏色,請在table.css中找到色值:#ADD8E6,然后全部替換成自己想要的色值即可。附件是一個具體的例子。
table.css源碼:
新聞熱點
疑難解答