CSS表格變成一條線是一種常見的布局方式，適用于移動設備或窄屏幕顯示。下面來介紹一種實現方法。

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%;
}
}

以上是實現代碼，注釋中已做詳細說明。關鍵是通過媒體查詢@media進行響應式布局，當屏幕寬度小于等于768px時，將表格元素的display屬性轉為block，并利用:before偽類添加列頭內容。通過這種方式，表格變成了一條線的形式，同時保留了原有的表格結構和樣式。

這種方式適用于不需要過多數據展示和交互的場合，使頁面簡潔大方，易于閱讀。