隨著Web應用程序的普及和功能需求的增加，使用CSS表格來顯示數據變得越來越流行。在CSS表格中，經常需要添加增刪改查按鈕，以提高用戶體驗和數據操作的效率。

/* CSS樣式表 */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
/* 增刪改查按鈕 */
.button {
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
background-color: #4CAF50;
color: white;
border-radius: 5px;
}
.add-button {
background-color: #008CBA;
}
.edit-button {
background-color: #f44336;
}
.delete-button {
background-color: #555555;
}
.search-button {
background-color: #555555;
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* HTML代碼 */
<div class="table-container">
<table>
<thead>
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>25</td>
<td>
<a href="#" class="button edit-button">編輯</a>
<a href="#" class="button delete-button">刪除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>30</td>
<td>
<a href="#" class="button edit-button">編輯</a>
<a href="#" class="button delete-button">刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="clearfix">
<a href="#" class="button add-button">添加</a>
<input type="text" placeholder="請輸入關鍵字">
<a href="#" class="button search-button">搜索</a>
</div>

在CSS樣式表中，我們首先定義了表格的基本樣式，包括邊框、寬度、內邊距和文本對齊方式等。然后定義了增刪改查按鈕的樣式，包括背景色、文字顏色和圓角等。接著在HTML代碼中，我們使用了一個包含table元素的div標簽，將表格呈現在一個獨立的容器中。每一行數據都有一個編輯和刪除按鈕，用于相應操作。在表格下方，也添加了一個包含添加、搜索和輸入框的div標簽，使用了clearfix樣式類來防止浮動元素引起的布局問題。

總之，在CSS表格中添加增刪改查按鈕可以提高用戶體驗和數據操作的效率，同時還能保持視覺一致性和樣式美觀。開發人員只需要掌握基本的CSS技巧和HTML結構，就可以輕松實現這一功能。