CSS表格中間添加一條線是一個簡單而有用的技巧,可以使表格看起來更加整潔美觀。一種常見的實現(xiàn)方法是使用CSS偽元素來添加一個border屬性。
table { border-collapse: collapse; } td { padding: 10px; text-align: center; position: relative; } td:after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background-color: #000; z-index: -1; }
以上代碼中,我們對表格進行了border-collapse樣式的設置,讓表格中的單元格之間合并邊框。然后我們在每個單元格上設置了一個相對定位的position屬性,以便在單元格內(nèi)部絕對定位偽元素。
接著,我們使用了偽元素的:after屬性來創(chuàng)建一個虛擬元素,即每個單元格的底部中間出現(xiàn)一條1像素高的線。我們指定了該元素的位置、高度、背景色、層級等屬性,使得其顯示在單元格內(nèi)部底部中間位置,并不會遮蓋單元格的內(nèi)容。
這樣,我們就可以簡單地讓CSS表格中間出現(xiàn)一條線了。當然,對于不同的表格樣式和需求,可以根據(jù)具體情況調(diào)整代碼。
上一篇css表格中帶復選框