CSS表格是網頁設計中常見的元素之一。表格中的內容如果不能正確對齊,會給用戶帶來不好的體驗。下面我們來討論一下CSS表格每列對齊方式。
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } .th-right { text-align: right; } .td-center { text-align: center; }
上面的代碼是一個基本的CSS表格樣式,包括邊框合并、列寬百分比以及單元格邊框樣式等。在表格中每列的對齊方式也十分重要,在這個基本樣式中,默認使用了左對齊方式。
如果希望表格中某一列的內容右對齊,可以使用.th-right類:
右對齊列 內容 ...
同樣的,如果希望表格中某一列的內容居中對齊,可以使用.td-center類:
居中列 內容 ...
通過這些類名的設計,我們可以很方便地修改表格中每列的對齊方式,從而達到更好的用戶體驗效果。
上一篇css表格設置圓角