在CSS中,表格是一種常見的頁面元素。在設(shè)計表格時,我們可以通過控制表格的外寬和內(nèi)寬來調(diào)整表格的顯示效果。
表格的外寬指的是表格與周圍元素的距離,這個可以通過給表格添加margin屬性來實現(xiàn)。以下是一個示例:
table { margin: 20px; border-collapse: collapse; }
以上代碼表示表格與周圍元素之間的距離為20像素。需要注意的是,在設(shè)置表格外寬時,應(yīng)該使用border-collapse屬性來合并表格邊框,否則會出現(xiàn)重復(fù)邊框的情況。
表格的內(nèi)寬指的是表格內(nèi)元素(單元格)之間的距離,可以通過給單元格添加padding屬性來實現(xiàn)。以下是一個示例:
table { border-collapse: collapse; } td { padding: 10px; }
以上代碼表示單元格之間的距離為10像素。需要注意的是,當單元格內(nèi)部存在背景色或邊框時,應(yīng)該減去對應(yīng)的寬度,例如:
td { padding: 10px; background-color: #ccc; border: 1px solid #000; }
以上代碼中,單元格內(nèi)部的背景色和邊框都會占用一定的寬度,因此設(shè)置的padding值應(yīng)該減去這個寬度。