src/style/table.less
.@{prefix-cls}-table {
width: 100%;
max-width: 100%;
margin-bottom: 18px;
font-size: 14px;
> thead > tr > th,
> tbody > tr > th,
> tfoot > tr > th,
> thead > tr > td,
> tbody > tr > td,
> tfoot > tr > td {
padding:@tableTdPadding;
line-height: @tableTdLineHeight;
vertical-align: top;
border-top: 1px solid @lightGrayColor;
}
> thead > tr > th {
vertical-align: bottom;
border-bottom: 1px solid @lightGrayColor;
}
> caption + thead > tr:first-child > th,
> colgroup + thead > tr:first-child > th,
> thead:first-child > tr:first-child > th,
> caption + thead > tr:first-child > td,
> colgroup + thead > tr:first-child > td,
> thead:first-child > tr:first-child > td {
border-top: 0;
}
> tbody + tbody {
border-top: 2px solid @lightGrayColor;
}
}
.@{prefix-cls}-table-bordered {
border: @tableBorder;
border-collapse: separate;
border-radius: 2px;
border-left: none;
> thead > tr > th,
> tbody > tr > th,
> tfoot > tr > th,
> thead > tr > td,
> tbody > tr > td,
> tfoot > tr > td {
border-left: @tableTdBorderLeft;
}
> thead > tr > th,
> thead > tr > td {
border-bottom-width: 1px;
background: @lightColor;
}
> thead > tr:first-child > th,
> tbody > tr:first-child > th,
> tfoot > tr:first-child > th,
> thead > tr:first-child > td,
> tbody > tr:first-child > td,
> tfoot > tr:first-child > td {
border-top: 0;
}
> thead:last-child tr:last-child > th:first-child,
> tbody:last-child tr:last-child > td:first-child,
> tbody:last-child tr:last-child > th:first-child,
> tfoot:last-child tr:last-child > td:first-child,
> tfoot:last-child tr:last-child > th:first-child {
border-bottom-left-radius: 2px;
}
}
.@{prefix-cls}-table-striped > tbody > tr:nth-of-type(odd) {
background-color: @lightColor;
}
.@{prefix-cls}-table-hover > tbody > tr {
transition: all .3s ease;
}
.@{prefix-cls}-table-hover > tbody > tr:hover {
background-color: @hoverColor;
}
table col[class*="col-"] {
position: static;
display: table-column;
float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
position: static;
display: table-cell;
float: none;
}
.@{prefix-cls}-table-responsive {
min-height: .01%;
overflow-x: auto;
}
@media screen and (max-width: 767px) {
.@{prefix-cls}-table-responsive {
width: 100%;
margin-bottom: 13.5px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid @lightGrayColor;
}
}