.d-table { display: table; width: 100%; vertical-align: middle; text-align: center; table-layout: fixed; font-size: 28rpx; word-break: break-all; background-color: white; border-collapse: collapse; &.primary { &.dark { .d-thead { background-color: #2b85e4; } } &.disabled { .d-thead { background-color: #a0cfff; } } &.light { .d-thead { background-color: #ecf5ff; } } .d-thead { background-color: #2979ff; color: #fff; } } &.success { &.dark { .d-thead { background-color: #18b566; } } &.disabled { .d-thead { background-color: #71d5a1; } } &.light { .d-thead { background-color: #dbf1e1; } } .d-thead { background-color: #19be6b; color: #fff; } } &.warning { &.dark { .d-thead { background-color: #f29100; } } &.disabled { .d-thead { background-color: #fcbd71; } } &.light { .d-thead { background-color: #fdf6ec; } } .d-thead { background-color: #ff9900; color: #fff; } } &.danger { &.dark { .d-thead { background-color: #dd6161; } } &.disabled { .d-thead { background-color: #fab6b6; } } &.light { .d-thead { background-color: #fef0f0; } } .d-thead { background-color: #fa3534; color: #fff; } } &.info { &.dark { .d-thead { background-color: #82848a; } } &.disabled { .d-thead { background-color: #c8c9cc; } } &.light { .d-thead { background-color: #f4f4f5; } } .d-thead { background-color: #909399; color: #fff; } } &.gray { .d-thead { background-color: #aaa; color: #fff; } } &.border-under { .d-td, .d-th { @extend .noBorder; } .d-tr { @extend .border-bottom; } .d-table { .d-tr { @extend .noBorder; } } } &.large { .d-td, .d-th { height: 80rpx; } } &.middle { .d-td, .d-th { height: 60rpx; } } .d-td, .d-th { @extend .border; } .d-table { height: 100%; .d-td, .d-th { @extend .noBorder; } // .d-tr { // &:first-child { // .d-td{ // &.border-bottom { // border-bottom: none; // } // &.border-top { // border-top: none; // } // } // } // } } input.borderInput { border: 1px solid #ccc; border-radius: 6rpx; width: 80%; height: 80%; display: inline-flex; } } .d-caption { display: table-caption; background-color: inherit; } .d-thead { display: table-header-group; font-weight: 600; } .d-tbody { display: table-row-group; } .d-tfoot { display: table-footer-group; } .d-tr { display: table-row; width: 100%; } .d-td, .d-th { display: table-cell; vertical-align: middle; height: 50rpx; font-size: 28rpx; } .d-th { font-weight: 600; } .border-top { border-top: 1px solid #efefef !important; } .border-left { border-left: 1px solid #efefef !important; } .border-bottom { border-bottom: 1px solid #efefef !important; } .border-right { border-right: 1px solid #efefef !important; } .border { border: 1px solid #efefef; } .noBorder { border: 0; } .flex { display: flex; align-items: center; &-wrap { flex-wrap: wrap; } &-nowrap { flex-wrap: nowrap; } &-direction { flex-direction: column; } }