Styling borders for table cell

Question

If we want to achieve the following, i.e. style the border in such a way that the border will have the thick right bottom corner and upon hover show a plus sign.

What I have done: I have done selection of cells in tables. Normal borders. Even tried border styling, but most of which is rounded or cut-off borders, which is not of use here.

What I am trying to do: I am trying to mimic series fill functionality of excel in html table. Functionality is not a problem. I am just trying to get the styling of these borders right so that it is easier to comprehend.

So, How can we customize the border to get the desired effect only using css and html? select.js

     $(function () {
        $('td').click(function () {
        $(this).toggleClass('highlight');
        });
     });

table.html

    <table border="1" cellpadding="15">
       <tbody>
          <tr>
            <td>23</td>
            <td>57</td>
            <td>62</td>
          </tr>
       </tbody>
     </table> 

table.css

     .highlight {
         border-radius: 0px 0px 5px 5px;
         border: 2px solid black; 
     }

Answer 1

Edit

I went back and added a different behavior to each cell after looking at ther image I believe I understand now See updated Snippet.

---

It has been brought to my attention that you probably don't want every cell that way (I tend to go into automatic coding, like a robot 🤖.) I modified it so that the last cell will have the div.pad.

---

Did you mean a square on every cell or just the table? If the latter, let me know, it's an easy adjustment. I used

• position: relative and absolute

• z-index

• border-collapse: separate

• border-spacing, border, and outline

• Pseudo-elements ::before and ::after

• 2 unicode entities \1f4c4 📄 and \2795 ➕

• and the pseudo-class :hover of course.

• Added tr:last-of-type td:last-of-type to single out the last cell.

It looks bulky because there's no dimensions mentioned, but that's fine since the bulkiness highlights the styles and how they interact. Each square is a div that is a child of a cell (<td>). Making the cells relative whilst the divs are absolute allows us to give it coordinates in relation to the <td> edges. Once positioned in the bottom right corner, we give the div some dynamic content that appears on :hover. When :hovered upon, the pseudo-elements ::before and ::after appear. They to are positioned, but with a relative value because we want to move the fonts of ::before and ::after relative to their original position, rather than to another positioned element (like we did previously with each<td> and div.

Special note on the div.pad's styling.

• position:absolute allowed us to easily pick the bottom right corner. If bottom:0 and right:0 puts .pad snugly into the corner, then we can continue going forward with negative length values in order for .pad to sit halfway in and halfway out of cell/table borders.

• Added outline:2px solid white instead of border because unlike border, outline width doesn't displace other elements in the layout. The white color is to blend into the background giving the appearance of .pad being more of a separate yet related component of the table.

• z-index:1 was also given to .pad so that the white outline is clearly defined from the table borders.

The other main points are:

• The borders were made so that they were defined as separate properties but appeared as one border (like border-collapse: collapse;) To avoid that disconnected look the border-collapse:separate gives, we use outline to fill in that border-spacing of 1px; if we were to use only borders, the table as a whole would increase noticeably in size. The border and outline styles are inset and the last cell has an over sized outline style outset designating it as highlighted.

SNIPPET

table {
  border-collapse: separate;
  border-spacing: 1px;
  border: 1px inset black;
  outline: 1px inset black;
  table-layout: fixed;
  width: 80vw;
  min-height: 150px;
}

td {
border:1px solid black;
outline: 1px inset black;
}

td:hover {
  border: -3px inset black;
  outline: 6px outset black;
  position: relative;
  z-index:1;
  padding:1px;
}

.pad {
  background: black;
  cursor: pointer;
  position: absolute;
  height: 1px;
  width: 1px;
  z-index: 1;
  bottom: -1px;
  right: -1px;
}

td:hover .pad, 
.pad:hover {
  border: 4px solid black;
  bottom: -9px;
  right: -9px;
  outline: 2px solid white;
  z-index:2;
  padding:2px;
}

.pad:hover::before {
  content: '\1f4c4';
  position: relative;
  top: 20px;
  left: 10px;
  font-size: 1.2rem;
  z-index:2;
}

.pad:hover::after {
  content: '\2795';
  position: relative;
  top: 16px;
  left: 24px;
  font-size: .7rem;
  z-index:2;
}

<table>
  <tbody>
    <tr>
      <td>
        <div class='pad'></div>
      </td>
      <td>
        <div class='pad'></div>
      </td>
      <td>
        <div class='pad'></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='pad'></div>
      </td>
      <td>
        <div class='pad'></div>
      </td>
      <td>
        <div class='pad'></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='pad'></div>
      </td>
      <td>
        <div class='pad'></div>
      </td>
      <td>
        <div class='pad'></div>
      </td>
    </tr>
  </tbody>
</table>