CSS表格四個角有十字是一種非常實用的表格設計風格。這種設計可以讓表格更加美觀，同時也可以讓用戶更加清晰地看到表格的內容。下面我們來看一下如何通過CSS來實現這種效果。

/* 設置表格樣式 */
table {
border-collapse: collapse; /* 合并表格邊框 */
font-family: Arial, sans-serif; /* 設置字體 */
font-size: 14px; /* 設置字體大小 */
}
th, td {
border: 1px solid #ccc; /* 設置邊框樣式 */
padding: 8px 12px; /* 設置內邊距 */
text-align: center; /* 居中顯示文本 */
}
/* 設置四個角的偽元素 */
th:first-child:before,
th:first-child:after,
th:last-child:before,
th:last-child:after {
content: ""; /* 設置為空元素 */
position: absolute; /* 絕對定位 */
width: 10px; /* 設置寬度 */
height: 10px; /* 設置高度 */
background-color: #ccc; /* 設置背景顏色 */
}
/* 設置左上角偽元素 */
th:first-child:before {
top: -1px; /* 設置top屬性 */
left: -1px; /* 設置left屬性 */
border-top: 1px solid #ccc; /* 設置上邊框 */
border-left: 1px solid #ccc; /* 設置左邊框 */
}
/* 設置左下角偽元素 */
th:first-child:after {
bottom: -1px; /* 設置bottom屬性 */
left: -1px; /* 設置left屬性 */
border-bottom: 1px solid #ccc; /* 設置下邊框 */
border-left: 1px solid #ccc; /* 設置左邊框 */
}
/* 設置右上角偽元素 */
th:last-child:before {
top: -1px; /* 設置top屬性 */
right: -1px; /* 設置right屬性 */
border-top: 1px solid #ccc; /* 設置上邊框 */
border-right: 1px solid #ccc; /* 設置右邊框 */
}
/* 設置右下角偽元素 */
th:last-child:after {
bottom: -1px; /* 設置bottom屬性 */
right: -1px; /* 設置right屬性 */
border-bottom: 1px solid #ccc; /* 設置下邊框 */
border-right: 1px solid #ccc; /* 設置右邊框 */
}

通過上面的代碼，我們可以輕松地實現CSS表格四個角有十字的效果。當然，你也可以根據自己的需要，調整偽元素的大小和顏色，以達到更好的表格設計效果。