CSS表格的內(nèi)容寬度自適應(yīng)是指表格中的每一列寬度根據(jù)數(shù)據(jù)內(nèi)容自動調(diào)整，適應(yīng)不同大小的設(shè)備屏幕，展現(xiàn)更好的用戶體驗。

table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
color: #333;
font-weight: bold;
}
td {
border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 600px) {
/* 表格響應(yīng)式布局 */
th, td {
display: block;
}
th {
text-align: center;
}
td {
text-align: center;
border-bottom: none;
}
td:before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
}

在上述代碼中，我們首先將table的寬度設(shè)置為100%并合并邊框，以使表格填滿其容器。 然后我們設(shè)置表頭th和單元格td元素的內(nèi)邊距和文本對齊方式，并為表頭添加灰色背景和黑色字體加粗樣式。 接下來，我們設(shè)置每個單元格底部的1px寬的邊框，以分隔每個行和列。 最后，我們使用@media查詢設(shè)置了響應(yīng)式布局，當(dāng)屏幕窗口寬度小于600px時，我們修改th和td的display為block，使表格列垂直排列。然后在td:before偽類中添加了對應(yīng)單元格的data-label屬性，以顯示表頭文本。我們同時還將單元格的文本居中對齊，并去掉了底部邊框。