HTML combine border of two <a>

HTML combine border of two

I have a table with multiple elements within:

.TableClass td {    background-color: #050;    height: 150px;  }    .TableClass a {    background-color: #f00;    width: 100px;    height: 100px;    display: block;    border: 5px solid #000;  }

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 instead of 2 of my example.

Answer by Linushg111 for HTML combine border of two

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:

Answer by sheriffderek for HTML combine border of two

Quick answer:

You have to do 2 things, use the nth-of-type on a repeating element, in this case 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

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 by ashfaqrafi for HTML combine border of two

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

here is an updated fiddle, hopefully with be a solution for you

Answer by Banzay for HTML combine border of two

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

https://jsfiddle.net/54o0efuv/

Answer by Jagdish Parmar for HTML combine border of two

Seefiddle

Add CSS

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

Answer by Mario Plantosar for HTML combine border of two

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 by Falch0n for HTML combine border of two

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 by Albert Renshaw for HTML combine border of two

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

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

Answer by Nitin Kanish for HTML combine border of two

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 by Mr Lister for HTML combine border of two

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

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72