CSS中如何讓table自適應大小呢?一種簡單的方法是使用樣式表中的屬性,其中包括表格的布局方式、寬度、邊框、間距等。
table { width: 100%; /* 將表格寬度設置為100% */ border-collapse: collapse; /* 合并表格邊框 */ } td, th { padding: 8px; /* 添加單元格填充 */ text-align: center; /* 橫向居中顯示文字 */ vertical-align: middle; /* 縱向居中顯示文字 */ border-top: 1px solid #ddd; /* 添加單元格上邊框 */ border-bottom: 1px solid #ddd; /* 添加單元格下邊框 */ } th { background-color: #f2f2f2; /* 設置表頭背景顏色 */ font-size: 18px; /* 設置表頭字體大小 */ }
以上是對表格整體的一些設置,下面是對表格列寬的自適應設置。
table th, table td { width: 1%; /* 將單元格寬度設置為最小值 */ white-space: nowrap; /* 禁止單元格內文字換行 */ } table th:first-child, table td:first-child { width: 10%; /* 設置第一列寬度為10% */ } table th:last-child, table td:last-child { width: 15%; /* 設置最后一列寬度為15% */ }
這樣設置后,表格會自適應寬度,同時每列的寬度也會根據內容自適應調整。