How to hide a table border where two cells meet and one of them has a rowspan

Question

I have this table, and the first column has a rowspan, and I would like to hide the border that is shared between the first column and the last row! In the picture you see on the right how I want it!

I don't know how you can hide only a part of a border, I tried making the left border of the bottom part transparent hoping it overwrites the one of the first column, but it doesn't work!

Is this possible?

CSS of the bottom row:

    #detailYear .blackBorderPrintLeft {
    padding: 15px;
    font-size: 20px;
    vertical-align: middle;
    border-color: #000 !important;
    border-top: 1px solid !important;
    border-bottom: 1px solid !important;
    border-left: 0px solid rgba(255, 255, 255, 0.00) !important;
}

CSS of the left rowspan:

#detailYear .yearCellVertical {
    height: 140px;
    white-space: nowrap;
    width: 5%;
    border-color: #000;
    border-right: 1px solid;
    border-bottom: 1px solid;
}
    #detailYear .yearCellVertical > div {
        transform: translate(3px, 31px) rotate(270deg);
        width: 35px;
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
        font-size: 35px;
    }
        #detailYear .yearCellVertical > div > span {
            padding: 5px 10px;
        }

CSS of the entire table (I had table-bordered bootstrap class, but had to take it away and give manually borders because the upper border of the bottom row wasn't showing a thicker black border as I wanted):

#detailYear {
display: none;
width: 94%;
border: 1px solid rgb(221, 221, 221);

}

#detailYear td {
    vertical-align: middle;
    text-align: center;
    border-bottom: 0px solid rgb(221, 221, 221);
    border-top: 1px solid rgb(221, 221, 221);
    border-right: 1px solid rgb(221, 221, 221);
    border-left: 1px solid rgb(221, 221, 221);
}

Answer 1

You should try using div for this kind of things that would be easy. - Simply create two div. - one on the left side with text vertical. - then create a table or div whichever you need. - then again create a div at the bottom - then provide the css according to your need.

Example: `<div class='leftDiv'>
  <p>
  Texting
  </p>
</div>
<div class='tableContainer'>
<table>
<tr><td>test</td><td>one</td></tr>
<tr><td>test</td><td>one</td></tr>
<tr><td>test</td><td>one</td></tr>
<tr><td>test</td><td>one</td></tr>
<tr><td>test</td><td>one</td></tr>
</table>
</div>
<div style='clear:both'>

</div>
<div class='mask'>

</div>
<div class='bottomDiv'>
<p>
  Texting
  </p>
</div>`

CSS `.container{
  height: 100%;
  width: 100%;
}
.tableContainer{
  float: left;
  clear: right;
}
.leftDiv{
  width:50px; 
  height:300px; 
  background:lightgray; 
  position:relative;
  border: 1px solid;
  border-bottom: 0;
  float: left;
}
.leftDiv p{
  text-align: center;
}
.mask{
  width:50px; 
  height:51px; 
  background:lightgray; 
  position:relative;
  border: 1px solid;
  border-top: 0;
  border-right: 0px;
  float: left;

}
.bottomDiv {
  width:500px; 
  height:50px; 
  background:lightgray; 
  position:relative; 
  float:left;
  border: 1px solid;
  border-left: 0px;
}
.bottomDiv p{
  text-align: center;
}`