HTML table - remove cellspacing/border from a particular cell - css

Question

I have a table with 3 columns. I'd like to remove the border/cellspacing between the first and second columns, and make it appear like one column.
Fiddle: https://jsfiddle.net/o8x3ego0/1/
HTML
<table id="holdingsDistributionTable" class="table table-responsive">
<tr>
<th colspan="2">Currency</th>
<th>Value</th>
</tr>
<tr>
<td>
<div class="currencyHolder greenCurrencyHolder">
<div class="currency greenCurrency">
AED
</div>
</div>
</td>
<td>
<div style="text-align: center">
UA Emirates Dirham
</div>
</td>
<td>
<b>345</b>
</td>
</tr>
<tr>
<td>
<div class="currencyHolder blueCurrencyHolder">
<div class="currency blueCurrency">
ARS
</div>
</div>
</td>
<td>
<div style="text-align: center">
Argentine Peso
</div>
</td>
<td>45345</td>
</tr>
</table>
In the above example, I'd like to remove the spacing between the 1st and 2nd columns in the data rows.

Answer 1

You can remove the border from the entire table by:
table {
border-collapse: collapse;
}
Then to add borders to the rows, table headers and the last table cells (or whatever table cells necessary by using :nth-child):
tr, th, td:last-child {
border: 1px solid black; /* changed to black to be more noticeable */
}
Then remove padding from the table header and table cells:
th, td {
padding: 0;
}
Here is the updated fiddle.

Answer 2

edit: it was col and not row, so i believe this is more like this : https://jsfiddle.net/o8x3ego0/6/ (same method, but padding to draw the hole in between th )
you can use
border-collapse to remove cellspacing and to allow style tr borders
a line-height to th instead padding
draw a transparent border at bottom of th (padding works too)
and erase bg color with background-clip to mimic the border-spacing only where you want to
body {
background-color: white;
}
/* demo */
tr:nth-child(1) th {
border-bottom: 3px solid transparent;
background-clip: content-box
}
table {
border-collapse: collapse;
}
/* end */
.table {
margin-bottom: 20px;
}
.table-responsive {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.currencyHolder {
padding: 7px;
border-radius: 5px;
border-width: 2px;
border-style: solid;
margin-top: 10px;
margin-bottom: 10px;
max-width: 36px;
text-align: center;
}
.currency {
border-radius: 5px;
color: white;
font-size: 11px;
font-weight: bold;
}
.greenCurrencyHolder {
background-color: green;
border-color: darkgreen;
}
.greenCurrency {
background-color: darkgreen;
}
.blueCurrencyHolder {
background-color: azure;
border-color: cadetblue;
}
.blueCurrency {
background-color: cadetblue;
}
#holdingsDistributionTable {
display: table;
/*width: 100% !important;*/
}
#holdingsDistributionTable th {
background-color: #F4F5F6;
color: #AAABAE;
line-height: 2.5em;
/* instead vertical padding */
width: 25%;
font-weight: normal;
}
#holdingsDistributionTable th:last-child,
#holdingsDistributionTable td:last-child {
background-color: #DFE1E3;
color: #A19D9E;
}
#holdingsDistributionTable td:last-child {
background-color: #DFE1E3;
color: black;
}
#holdingsDistributionTable th,
#holdingsDistributionTable td {
min-height: 15px;
background-color: #F4F5F6;
}
<table id="holdingsDistributionTable" class="table table-responsive">
<tr>
<th colspan="2">Currency</th>
<th>Value</th>
</tr>
<tr>
<td>
<div class="currencyHolder greenCurrencyHolder">
<div class="currency greenCurrency">
AED
</div>
</div>
</td>
<td>
<div style="text-align: center">
UA Emirates Dirham
</div>
</td>
<td>
<b>345</b>
</td>
</tr>
<tr>
<td>
<div class="currencyHolder blueCurrencyHolder">
<div class="currency blueCurrency">
ARS
</div>
</div>
</td>
<td>
<div style="text-align: center">
Argentine Peso
</div>
</td>
<td>45345</td>
</tr>
</table>

Answer 3

The best solution would be to make your table only two columns in the first place and do not use colspan="2" then make the stylized currency abbreviation line up with the currency name by setting the two div in each column inline block items using display: inline-block; in your CSS
Fiddle: https://jsfiddle.net/f30tujzn/
this solution is not only easier then removing part of your border but will render faster, and respond better on smaller devices.