色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css中table自適應

錢浩然1年前8瀏覽0評論

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% */
}

這樣設置后,表格會自適應寬度,同時每列的寬度也會根據內容自適應調整。