HTML combine border of two <a> - html

Question

I have a table with multiple <a> elements within:
.TableClass td {
background-color: #050;
height: 150px;
}
.TableClass a {
background-color: #f00;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
Fiddle: https://jsfiddle.net/p937jbee/1/
Is there a way to avoid double borders?
UPDATE:
I can't change the HTML code and there are multiple <td> instead of 2 of my example.

Answer 1

Here is a solution for multiple cells:
You need to zero out the left border for all cells except first one
.TableClass tr td:not(:first-child) a {
border-left: 0;
}
Have a look at snippet
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
}
.TableClass tr td:not(:first-child) a {
border-left: 0;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
https://jsfiddle.net/54o0efuv/

Answer 2

Just add a seperate class to one or both of the boxes where you remove the border ex. JSFIDDLE
a.one{
border-left: 0px;
}
html:
<a class="one" href="#"></a>

Answer 3

Seefiddle
Add CSS
.TableClass td:nth-child(2) a {
border-left:none;
}

Answer 4

This should work even if you have multiple elements and not just 2. https://jsfiddle.net/p937jbee/4/
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 4px solid #000000;
}
.TableClass td:first-child a {
border-right: 2px solid #000000;
}
.TableClass td:last-child a {
border-left: 2px solid #000000;
}

Answer 5

For a more consistant build-up I suggest to leave the right border, except for the last td. In case you'd like to add more blocks.
CSS
.TableClass td {
background-color: #005500;
height: 150px;
}
.TableClass td a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
border-right: 0;
}
.TableClass td:last-of-type a {
border-right: 5px solid #000000;
}

Answer 6

border-collapse: collapse;
use this css
The border-collapse property is for use on elements (or elements made to behave like a table through display: table or display: inline-table).

Answer 7

The most straightforward method is to assign border-collapse:collapse to the table and to move the border property from the a elements to the tds. That is all you need to change.
.TableClass table {
border-collapse: collapse; /* new */
}
.TableClass td {
background-color: #005500;
height: 150px;
border: 5px solid #000000; /* moved */
}
.TableClass a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>

Answer 8

.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
}
.elem1{
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
}
.elem2{
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
border-right: 5px solid #000000;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<td>
</td>
<td>
</td>
</table>
</div>
here is an updated fiddle, hopefully with be a solution for you

Answer 9

Quick answer:
You have to do 2 things, use the nth-of-type on a repeating element, in this case <td> and change how you write your brackets. :P - but really, you may need to say, every 2nd or third block - depending on how you do things. You may want to just use a list instead of a table - depending on the goal. :nth-of-type(2n+2) etc. Look her up. : )
HTML
<table cellspacing="0" cellpadding="0" class="table">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
CSS
.table a {
background: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 4px solid #000000;
}
.table td:nth-of-type(odd) a {
border-right: 2px solid black;
}
.table td:nth-of-type(even) a {
border-left: 2px solid black;
}
https://jsfiddle.net/6bgbmde5/
or you can use the background of the tr
.table tr {
display: block;
background: black;
padding: 4px;
}
.table a {
background: red;
width: 100px;
height: 100px;
display: block;
}
.table td:not(:last-of-type) a {
margin-right: 4px;
}
There are many ways that all have side-effects and it all depends on hovers and all sorts of stuff. Good luck!

Answer 10

Since OP has stated that they can-not change the HTML a hacky CSS solution must be implemented. Therefor I will use negative margins which many of you frown upon but I don't see any other options available.
Use the following CSS:
.TableClass td {
background-color: #005500;
height: 150px;
}
.TableClass a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
margin-left:-5px;
}
.TableClass td:nth-child(1) a {
margin-left:0px;
}