在網站開發過程中，表格是一個常見的元素。而為了提高用戶的搜索效率，我們可以在表格中添加搜索功能。下面，我們就來講解如何使用CSS來實現表格搜索。

/**
* 定義搜索框樣式
*/
input[type=search] {
width: 250px; /* 設置搜索框寬度 */
padding: 8px 16px; /* 設置搜索框內邊距 */
font-size: 16px; /* 設置搜索框字體大小 */
border: none; /* 去掉搜索框邊框 */
background-color: #f1f1f1; /* 設置搜索框背景色 */
margin-bottom: 16px; /* 設置搜索框和表格之間的間距 */
}
/**
* 定義表格樣式
*/
table {
border-collapse: collapse; /* 設置表格邊框合并 */
width: 100%; /* 設置表格寬度自適應 */
margin-top: 16px; /* 設置表格和搜索框之間的間距 */
}
/**
* 定義表格td樣式
*/
td {
border: 1px solid #ddd; /* 設置表格單元格邊框 */
padding: 8px; /* 設置表格單元格內邊距 */
text-align: left; /* 設置表格單元格文本居左顯示 */
}
/**
* 定義隱藏行樣式
*/
tr.hide {
display: none; /* 隱藏行 */
}

以上是CSS代碼的基本樣式設置，接下來就要實現搜索的功能了。

/**
* 在搜索框輸入內容時觸發的事件
*/
$('input[type=search]').on('input', function() {
var val = $(this).val().toLowerCase(); // 獲取搜索框輸入內容并轉為小寫
$('table tr').each(function() { // 遍歷表格每一行
var text = $(this).text().toLowerCase(); // 獲取該行文本并轉為小寫
if (text.indexOf(val) > -1) { // 判斷該行是否包含搜索框內容
$(this).removeClass('hide'); // 顯示該行
} else {
$(this).addClass('hide'); // 隱藏該行
}
});
});

代碼邏輯很簡單，就是通過事件監聽獲取搜索框輸入內容，并遍歷表格每一行，判斷該行是否包含搜索框內容，然后顯示或隱藏。

以上就是使用CSS實現表格搜索的方法，希望對大家有所幫助。