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!

image example here

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

this is all the css code that affects these tables, the only other thing is the default bootstrap css that is applied as well. And for the html, I can put it if needed, but it's just the declaration of the table and the classes I put into it, to me it didn't seem important to have for my problem — AJ989
Instead of using a right border on that first cell, use a left border on the second cells, expect for the second cell in the last row …? — CBroe
CBroe, if you comment in a new answer I'm gonna select yours as solution!! I don't know why I didn't think about something that simple...works like a charm! thank you — AJ989

sanjeev jha sanjeev jha · Accepted Answer · 2018-01-09T11:09:08

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

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

1 Answers