在網頁設計中,經常會用到表格來展示內容。然而,表格的樣式可能會隨著表格內文字的增減而變化,這會影響網頁的美觀度和可讀性。因此,我們需要使用CSS來保證表格樣式不隨文字多少變化。
table { border-collapse: collapse; width: 100%; max-width: 800px; margin: 0 auto; } td, th { border: 1px solid #ccc; padding: 8px; text-align: left; vertical-align: middle; }
上述CSS代碼中,border-collapse: collapse;
可以讓表格的邊框合并在一起,不會因為文字多少而產生多余的邊框線。
width: 100%;
可以讓表格的寬度自適應網頁的寬度,保證表格的大小不會因為網頁放大或縮小而改變。
max-width: 800px;
可以防止表格過寬,超出網頁顯示范圍。
margin: 0 auto;
可以讓表格居中顯示。
對于單元格樣式,我們使用border: 1px solid #ccc;
來設置單元格邊框線。同時,padding: 8px;
可以讓單元格內的內容距離邊框線有一定的距離,讓整個表格看起來更加美觀。另外,text-align: left;
可以讓單元格內的文字向左對齊,vertical-align: middle;
可以讓單元格內的文字垂直居中。
使用以上CSS代碼,我們可以保證表格樣式不隨文字多少變化,讓網頁看起來更加整潔美觀。
上一篇css表格一格中有多行字
下一篇css表格中圖片的位置