如何隐藏两个单元格相交且其中一个单元格具有 rowspan 的 table 边框

Question

我有这个 table，第一列有一个 rowspan，我想隐藏第一列和最后一行之间共享的边框！在图片中，您在右边看到我想要的样子！

我不知道你怎么能只隐藏一部分边框，我试着让底部的左边框透明，希望它能覆盖第一列的边框，但它不起作用！

这可能吗？

CSS 最后一行：

    #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 左边的行跨度：

#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 整个 table（我有 table-边框 bootstrap class，但不得不把它拿走并手动设置边框，因为底行的上边框没有像我想要的那样显示较粗的黑色边框):

#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

你应该尝试使用 div 来处理这种很容易的事情。 - 只需创建两个 div。 - 一个在左侧，文字垂直。 - 然后根据需要创建 table 或 div。 - 然后在底部再次创建一个 div - 然后根据您的需要提供css。

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

如何隐藏两个单元格相交且其中一个单元格具有 rowspan 的 table 边框

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

html

css

twitter-bootstrap

css-tables