CSS表格變成一條線是一種常見(jiàn)的布局方式，適用于移動(dòng)設(shè)備或窄屏幕顯示。下面來(lái)介紹一種實(shí)現(xiàn)方法。

table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
td, th {
padding: 10px;
border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 768px) {
tbody, tr {
display: block;
}
tr {
border-bottom: 1px solid #ddd;
}
td:before {
content: attr(data-label);
display: inline-block;
font-weight: 600;
width: 50%;
margin-right: 10px;
}
td {
display: inline-block;
text-align: right;
width: 50%;
}
}

以上是實(shí)現(xiàn)代碼，注釋中已做詳細(xì)說(shuō)明。關(guān)鍵是通過(guò)媒體查詢@media進(jìn)行響應(yīng)式布局，當(dāng)屏幕寬度小于等于768px時(shí)，將表格元素的display屬性轉(zhuǎn)為block，并利用:before偽類添加列頭內(nèi)容。通過(guò)這種方式，表格變成了一條線的形式，同時(shí)保留了原有的表格結(jié)構(gòu)和樣式。

這種方式適用于不需要過(guò)多數(shù)據(jù)展示和交互的場(chǎng)合，使頁(yè)面簡(jiǎn)潔大方，易于閱讀。