Table是我們在網頁設計中常常用到的一種標簽，但當我們需要在不同寬度的設備上呈現這些表格時，其響應性和可讀性就會變得非常挑戰和不好處理。為了解決這個問題，我們可以使用CSS來為Table添加一些響應式的樣式，使其在不同設備上保持一致的外觀和易讀性。

table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
@media only screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
}
td {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
}
td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}

上述代碼中，我們使用了@media查詢和一些特定的CSS樣式，為Table設置了以下響應式特性：

• 將Table的寬度設為100%。
• 去除Table中單元格之間的空隙和分隔線。
• 為Table中的奇數行添加灰色背景色。
• 當屏幕寬度小于600px時，將Table的各元素設為塊元素。
• 隱藏Table的表頭，并為表體添加數據標簽。
• 將Table的表格單元格顯示為塊級元素，并添加特定樣式。

通過以上CSS代碼，我們可以實現Table在不同設備上的響應式展示，讓Table在各種屏幕中都具備良好的可讀性和用戶體驗。