在前端開發中，經常會遇到需要用表格來展示數據的情況。而表格中斜線一分為二的效果通常用于區分不同的數據項，增強視覺效果。下面介紹如何通過CSS實現表格斜線一分為二效果。

/* 表格樣式 */
table {
border-collapse: collapse;
table-layout: fixed;
}
td, th {
border: 1px solid #ccc;
padding: 10px 20px;
}
/* 對角線樣式 */
.diagonal {
position: relative;
}
.diagonal:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(100% + 2px);
height: calc(100% + 2px);
border: 1px solid #ccc;
-webkit-transform: skew(-15deg);
transform: skew(-15deg);
}
.diagonal:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(100% + 2px);
height: calc(50% + 1px);
background-color: #fff;
-webkit-transform: scaleY(2);
transform: scaleY(2);
}

首先，我們需要對表格進行一些基本樣式的設置，包括讓表格邊框合并、固定表格布局等。然后，通過CSS偽類`:before`和`:after`來實現對角線效果。

`:before`偽類用于創建一個絕對定位的元素，表示對角線的邊框樣式，使用`transform`的`skew`屬性來傾斜元素實現斜線。`width: calc(100% + 2px);`和`height: calc(100% + 2px);`分別表示寬高為表格的尺寸加上1像素的邊框，保證不會有空隙出現。

`:after`偽類用于創建一個絕對定位的元素，表示對角線的填充樣式，使用`transform`的`scaleY`屬性將元素縱向拉伸為兩倍，因為傾斜后元素高度只有原來的一半。

最后在需要應用對角線效果的表格單元格上添加一個類名`diagonal`即可。