简体   繁体   中英

CSS table style - spacing between center borders of table

I want a space between "a's measurement" right side border and "download b's" left side border along that column of borders but I am not sure what is needed because I am only aware of border-collapse . I just want something like a 2px-5px gap, just enough to tell there not the same measurement.

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;
}

You could insert an empty td in each row as a third cell and address that via css ( :nth-child(3) ) to have no border and a certain width:

 .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
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM