![](/img/trans.png)
[英]Using CSS to style data table to remove borders and change data cell height?
[英]CSS table style - spacing between center borders of table
我想要在“a 的測量”右側邊框和“下載 b 的”左側邊框之間沿着該邊框列留一個空格,但我不確定需要什么,因為我只知道border-collapse
。 我只想要一個 2px-5px 的差距,足以告訴那里不一樣的測量。
JavaScript:
innerHTML = '<table class="tableRes" id="tableRes">\
<thead><tr><th colspan="4">Test</th></tr></thead>\
<tr><td>upload a</td><td>a's measurement</td><td>download b</td><td>b's measurement</td></tr>\
<tr><td>upload c</td><td>c's measurement</td><td>download d</td><td>d's measurement</td></tr>\
<tr><td>upload e</td><td>e's measurement</td><td>download f</td><td>f's measurement</td></tr>\
<tr><td>upload g</td><td>g's measurement</td><td>download h</td><td>h's measurement</td></tr>\
</table>';
CSS:
.tableRes {
border: 1px solid black;
border-collapse: collapse;
background-color: #ADD8E6;
margin-left: auto;
margin-right: auto;
}
.th, td {
border: 1px solid black;
}
您可以在每一行中插入一個空的td
作為第三個單元格,並通過 css ( :nth-child(3)
) 解決該問題,使其沒有邊框和一定的寬度:
.tableRes { border: 1px solid black; border-collapse: collapse; background-color: #ADD8E6; margin-left: auto; margin-right: auto; } th, td { border: 1px solid black; } td:nth-child(3) { width: 15px; border: none; }
<table class= "tableRes"> <thead> <tr> <th colspan="5">Test</th> </tr> </thead> <tr> <td>upload a</td> <td>a's measurement</td> <td></td> <td>download b</td> <td>b's measurement</td> </tr> <tr> <td>upload c</td> <td>c's measurement</td> <td></td> <td>download d</td> <td>d's measurement</td> </tr> <tr> <td>upload e</td> <td>e's measurement</td> <td></td> <td>download f</td> <td>f's measurement</td> </tr> <tr> <td>upload g</td> <td>g's measurement</td> <td></td> <td>download h</td> <td>h's measurement</td> </tr> </table>
td {
padding: 2px 6px; //table elements doesn't get affected by margin
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.