title: Black border on single table cell css
body: <p>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!</p>
  
  <p>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):
  <a href="https://jsfiddle.net/a549b6t1/10/" rel="nofollow noreferrer">https://jsfiddle.net/a549b6t1/10/</a></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;    
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;    
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td id="selected"&gt;
              &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;    &lt;tr&gt;
          &lt;td&gt;
                          &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
  
          &lt;/td&gt;
          &lt;td&gt;            &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
  
          &lt;/td&gt;
          &lt;td&gt;            &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
  
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;input type="text"&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;    
  &lt;/table&gt;
  </code></pre>
  
  <p>And css (dunno why, this site asks me to paste the code here) </p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Hope it will help to understand the problem</p>
  
  <p>This is how I want it to llok like
  <img src="https://i.stack.imgur.com/MlseD.png" alt="This is how I want it to llok like">
  This is how it really looks like now
  <img src="https://i.stack.imgur.com/PvNTC.png" alt="This is how it really looks now"></p>
  
  <p>Solution provided by <a href="https://stackoverflow.com/users/4768433/shaggy">Shaggy</a> : <a href="https://jsfiddle.net/a549b6t1/14/" rel="nofollow noreferrer">https://jsfiddle.net/a549b6t1/14/</a>
  Thank you!</p>