I have some borders of style double
, while some borders of style solid
according to my precedence requirements. These styles are for different colors of border of <td>
in my table.
This is an example table:
table { border-collapse: collapse; width: 100%; border-bottom: 1px double #000; } td { border: 1px double #dddddd; text-align: left; padding: 8px; } tr:first-child td { border-top: none; } tr:last-child td { border-bottom: none; } td:first-child { border-left: none; } td:last-child { border-right: none; }
<table> <tr> <td>1</td> <td rowspan="2">2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> </tr> </table>
double
to solid
for given <td>
because I am already using them for other td
classes (see EDIT).
The rowspan
can be any number.
Here is the complete SCSS
file:
$dark-black-grey: #212121;
$black-grey: #616161;
$dark-grey: #bdbdbd;
$medium-grey: #e0e0e0;
$light-grey: #eeeeee;
$blue-grey: #b0bec5;
$light-blue-grey: #cfd8dc;
$white-grey: #fafafa;
$blue: #64b5f6;
$light-blue: #90caf9;
$white-blue: #bbdefb;
$green: #81c784;
$red: #e57373;
$light-red: #ef9a9a;
$white-red: #ffcdd2;
$light-yellow: #fffde7;
$font-size: 14px;
$header-height: 30px;
#data-wrapper {
display: grid;
grid-template-columns: 1fr 2fr 4fr;
div {
height: 100vh;
&:not(:last-child) {
border-right: 1px double $dark-grey;
}
div.table-wrapper {
height: calc(100% - #{$header-height});
overflow-x: hidden;
overflow-y: auto;
table {
width: 100%;
border-bottom: 1px double $dark-grey;
tr {
&:first-child {
td {
border-top: 0;
}
}
&:last-child {
td {
border-bottom: 0;
}
}
td {
border: 1px double $light-grey;
padding: 4px 8px;
&:first-child {
border-left: 0;
}
&:last-child {
border-right: 0;
}
&.fade {
color: $black-grey;
}
&.footer {
text-align: right;
font-weight: 500;
}
&:not(.warning):not(.info) {
&.computed {
background-color: $light-yellow;
}
&.optional {
background-color: #ffeeff;
}
&.input-box {
background-color: $white-grey;
&:hover {
background-color: $light-grey
}
}
}
&.warning {
background-color: $light-red;
input {
background-color: $light-red;
}
&:not(.button) {
border-style: solid;
border-color: $light-red;
}
&.button {
background-color: $white-grey;
&:hover {
background-color: $white-red;
border-style: solid;
border-color: $white-red;
}
&:active {
background-color: $light-red;
border-style: solid;
border-color: $light-red;
}
}
}
&.info {
background-color: $light-blue;
input {
background-color: $light-blue;
}
&:not(.button) {
border-style: solid;
border-color: $light-blue;
}
&.button {
text-align: center;
font-weight: 500;
background-color: $white-grey;
&:hover {
background-color: $white-blue;
border-style: solid;
border-color: $white-blue;
}
&:active {
background-color: $light-blue;
border-style: solid;
border-color: $light-blue;
}
}
}
&.button {
cursor: pointer;
padding: 4px;
}
}
}
}
}
table {
border-collapse: collapse;
&.popup {
position: absolute;
box-shadow: 2px 2px 4px 1px $black-grey;
td {
background-color: white;
padding: 4px 8px;
cursor: pointer;
&:hover {
background-color: $light-grey;
}
&:active {
background-color: $medium-grey;
}
}
}
&.header {
width: 100%;
border-bottom: 1px double $dark-grey;
height: $header-height;
tr td {
text-align: center;
font-weight: 500;
padding: 0 4px;
&.fade {
color: $black-grey;
}
&.button {
cursor: pointer;
&:hover:not(:active) {
background-color: $light-grey;
}
&:active {
background-color: $medium-grey;
}
}
}
}
}
}
}
svg {
display: block;
margin: auto;
width: $font-size;
height: $font-size;
}
input {
border: none;
padding: 0;
width: 100%;
&:hover {
box-shadow: 0 0 1px 1px $blue
}
&:focus {
outline: none;
box-shadow: 0 0 1px 1px $green;
&.invalid {
box-shadow: 0 0 1px 1px $red
}
}
}
td.shrink {
width: 1%;
white-space: nowrap;
}
Does this help?
table { border-collapse: collapse; width: 100%; border-bottom: 1px double #000; } td { border: 1px double #dddddd; text-align: left; padding: 8px; } tr:first-child td { border-top: none; } tr:last-child td { border-bottom: none; } td:first-child { border-left: none; } td:last-child { border-right: none; } td[rowspan="2"] { border-bottom: 1px double #000; }
<table> <tr> <td>1</td> <td rowspan="2">2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> </tr> </table>
PLEASE NOTE : If this does not help you we need 2 more things from you.
CSS
/ HTML
code, not just a snippetJavaScript
or JQuery
to solve your issueSee the fiddle: JSFiddle
add the below css
td[rowspan="2"] {
border-bottom: 1px double #000;
}
This is pure CSS
solution. Not sure if it works for all cases because of the precedence among other <td>
with solid
borders, but didn't find any such cases till now.
td[rowspan]:not([rowspan="1"]) {
border-bottom-style: solid;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.