Black border on single table cell css - html

Question

Just cannot imagine how to do a single table cell border black. Just like it is in excel - whole table TD borders are, for example, white, and selected cell has black border.
The obvious solution is to change borders of the nearest cells as well, but the table is dynamically generated ant it takes too much effort to calculate current cell's neighbours. Although, the current cell is known from the "click" event, so it would be great to achieve that styling it.
Tried to put the div inside but cannot align it without specifying cell and div sizes exactly in pixels, that is not portable.
Please help!
Sorry, thought it's obvious without code. Actually, I don't have a code that's working, but currently I'm trying that (wrote just a quick sample, sorry):
https://jsfiddle.net/a549b6t1/10/
<table>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td id="selected">
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr> <tr>
<td>
<div>
<input type="text">
</div>
</td>
<td> <div>
<input type="text">
</div>
</td>
<td> <div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
</table>
And css (dunno why, this site asks me to paste the code here)
table
{
border-collapse: separate;
border-spacing: 0;
padding: 0;
border: 0px solid #ffffff;
margin: 1em;
}
td
{
font-size: 1rem;
empty-cells: show;
border: 1px solid rgba(230,222,255,1);
padding: 0;
}
td#selected
{
font-size: 1rem;
empty-cells: show;
border: 1px solid rgba(0,0,0,1);
padding: 0;
}
tr:nth-child(odd)
{
padding: 0px;
margin: 0;
background: #efedee;
border: 0px solid transparent;
overflow: visible;
}
tr:nth-child(even)
{
padding: 0px;
margin: 0;
background: #f6f4f5;
border: 0px solid transparent;
overflow: visible;
}
input[type=text]
{
background: rgba(255,255,255,0);
border: 0px solid rgba(255,255,255,1);
margin: 0;
padding: 5px;
height: 1rem;
}
Hope it will help to understand the problem
This is how I want it to llok like
This is how it really looks like now
Solution provided by Shaggy : https://jsfiddle.net/a549b6t1/14/
Thank you!

Answer 1

Adjusting the adjacent cell borders is still going to cause you a problem as, on the cell above, for example, you'll have the left and right borders cutting in to the bottom border slightly as illustrated in this snippet:
div{
border:10px solid;
border-color:#000 #f00 #090 #009;
height:100px;
width:100px;
}
<div></div>
Instead, what you're going to need to do is collapse the borders of your table and then, for the active cells, use an absolutely positioned pseudo element to create the highlighted border, setting all 4 positioning values to the negative pixel value of the size of your border.
Here's a quick example using :hover to illustrate the principle:
*{box-sizing:border-box;}
table{
border-collapse:collapse;
}
td{
border:5px solid #ccc;
background:#eee;
height:100px;
position:relative;
width:100px;
}
td:hover::before{
border:5px solid #000;
bottom:-5px;
content:"";
left:-5px;
position:absolute;
right:-5px;
top:-5px;
z-index:1;
}
div{
position:relative;
z-index:2;
}
div,input{
width:100%;
}
<table>
<tbody>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
</tbody>
</table>
As an alternative, rather than giving each individual cell an initial border, you could use border-spacing instead, like so:
*{box-sizing:border-box;}
table{
background:#ccc;
border-spacing:5px;
}
td{
background:#eee;
height:100px;
position:relative;
width:100px;
}
td:hover::before{
border:5px solid #000;
bottom:-5px;
content:"";
left:-5px;
position:absolute;
right:-5px;
top:-5px;
}
div{
position:relative;
z-index:2;
}
div,input{width:100%;}
<table>
<tbody>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
</tbody>
</table>

Answer 2

You can use jquery to get current cell and then change its class to other class that defines visible borders
jquery :
$("#cell").click(function() {
$(this).toggleClass('not-selected selected');
});
css :
.not-selected{
border: 0px;
}
.selected{
border: 1px solid black;
}