在網(wǎng)頁制作中,表格的使用非常廣泛。而表格的外觀也是至關(guān)重要的。CSS樣式表能夠很好地調(diào)整表格的樣式,這里我們將會介紹如何使用CSS樣式表進行表格樣式的調(diào)整。
/* table樣式 */ table { border-collapse: collapse; /* 單元格邊框合并 */ width: 100%; /* 表格寬度 */ text-align: center; /* 文字居中 */ } th, td { border: 1px solid #ccc; /* 單元格邊框樣式 */ padding: 10px; /* 單元格內(nèi)邊距 */ } /* th樣式 */ th { background-color: #f8f8f8; /* 背景色 */ font-weight: bold; /* 字體加粗 */ } /* 鼠標懸浮樣式 */ tr:hover { background-color: #f5f5f5; } /* 表頭滾動固定 */ thead { position: sticky; top: 0; z-index: 1; background-color: #fff; } /* 單元格文本溢出省略號顯示 */ td { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 150px; }
以上就是一些常用的CSS樣式表對表格進行樣式調(diào)整的方法,可以按照需要進行修改和調(diào)整,使表格更加美觀。另外,也可以使用CSS框架或者插件,更加方便快捷地調(diào)整表格樣式。