表格样式

src/Masuit.MyBlogs.Core/wwwroot/Content/common/articlestyle.css

@@ -2,9 +2,173 @@
     font-weight: bold;
     font-size: 16px;
 }
-.label a {
-    color: white;
-}
+
+article table {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 20px;
+    border-collapse: collapse !important;
+}
+
+article table > thead > tr > th,
+article table > tbody > tr > th,
+article table > tfoot > tr > th,
+article table > thead > tr > td,
+article table > tbody > tr > td,
+article table > tfoot > tr > td {
+    padding: 8px;
+    line-height: 1.42857143;
+    vertical-align: top;
+    border-top: 1px solid #ddd;
+}
+
+article table > thead > tr > th {
+    vertical-align: bottom;
+    border-bottom: 2px solid #ddd;
+}
+
+article table > caption + thead > tr:first-child > th,
+article table > colgroup + thead > tr:first-child > th,
+article table > thead:first-child > tr:first-child > th,
+article table > caption + thead > tr:first-child > td,
+article table > colgroup + thead > tr:first-child > td,
+article table > thead:first-child > tr:first-child > td { border-top: 0; }
+
+article table > tbody + tbody { border-top: 2px solid #ddd; }
+
+article table article table { background-color: #fff; }
+
+article table > thead > tr > th,
+article table > tbody > tr > th,
+article table > tfoot > tr > th,
+article table > thead > tr > td,
+article table > tbody > tr > td,
+article table > tfoot > tr > td { padding: 5px; }
+
+article table { border: 1px solid #ddd; }
+article table > thead > tr > th,
+article table > tbody > tr > th,
+article table > tfoot > tr > th,
+article table > thead > tr > td,
+article table > tbody > tr > td,
+article table > tfoot > tr > td { border: 1px solid #ddd; }
+    article table > thead > tr > th,
+    article table > thead > tr > td {
+        border-bottom-width: 2px;
+    }
+
+article table > tbody > tr:hover { background-color: #f5f5f5; }
+
+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;
+}
+
+article table > thead > tr > td.active,
+article table > tbody > tr > td.active,
+article table > tfoot > tr > td.active,
+article table > thead > tr > th.active,
+article table > tbody > tr > th.active,
+article table > tfoot > tr > th.active,
+article table > thead > tr.active > td,
+article table > tbody > tr.active > td,
+article table > tfoot > tr.active > td,
+article table > thead > tr.active > th,
+article table > tbody > tr.active > th,
+article table > tfoot > tr.active > th { background-color: #f5f5f5; }
+
+article table > tbody > tr > td.active:hover,
+article table > tbody > tr > th.active:hover,
+article table > tbody > tr.active:hover > td,
+article table > tbody > tr:hover > .active,
+article table > tbody > tr.active:hover > th { background-color: #e8e8e8; }
+
+article table > thead > tr > td.success,
+article table > tbody > tr > td.success,
+article table > tfoot > tr > td.success,
+article table > thead > tr > th.success,
+article table > tbody > tr > th.success,
+article table > tfoot > tr > th.success,
+article table > thead > tr.success > td,
+article table > tbody > tr.success > td,
+article table > tfoot > tr.success > td,
+article table > thead > tr.success > th,
+article table > tbody > tr.success > th,
+article table > tfoot > tr.success > th { background-color: #dff0d8; }
+
+article table > tbody > tr > td.success:hover,
+article table > tbody > tr > th.success:hover,
+article table > tbody > tr.success:hover > td,
+article table > tbody > tr:hover > .success,
+article table > tbody > tr.success:hover > th { background-color: #d0e9c6; }
+
+article table > thead > tr > td.info,
+article table > tbody > tr > td.info,
+article table > tfoot > tr > td.info,
+article table > thead > tr > th.info,
+article table > tbody > tr > th.info,
+article table > tfoot > tr > th.info,
+article table > thead > tr.info > td,
+article table > tbody > tr.info > td,
+article table > tfoot > tr.info > td,
+article table > thead > tr.info > th,
+article table > tbody > tr.info > th,
+article table > tfoot > tr.info > th { background-color: #d9edf7; }
+
+article table > tbody > tr > td.info:hover,
+article table > tbody > tr > th.info:hover,
+article table > tbody > tr.info:hover > td,
+article table > tbody > tr:hover > .info,
+article table > tbody > tr.info:hover > th { background-color: #c4e3f3; }
+
+article table > thead > tr > td.warning,
+article table > tbody > tr > td.warning,
+article table > tfoot > tr > td.warning,
+article table > thead > tr > th.warning,
+article table > tbody > tr > th.warning,
+article table > tfoot > tr > th.warning,
+article table > thead > tr.warning > td,
+article table > tbody > tr.warning > td,
+article table > tfoot > tr.warning > td,
+article table > thead > tr.warning > th,
+article table > tbody > tr.warning > th,
+article table > tfoot > tr.warning > th { background-color: #fcf8e3; }
+
+article table > tbody > tr > td.warning:hover,
+article table > tbody > tr > th.warning:hover,
+article table > tbody > tr.warning:hover > td,
+article table > tbody > tr:hover > .warning,
+article table > tbody > tr.warning:hover > th { background-color: #faf2cc; }
+
+article table > thead > tr > td.danger,
+article table > tbody > tr > td.danger,
+article table > tfoot > tr > td.danger,
+article table > thead > tr > th.danger,
+article table > tbody > tr > th.danger,
+article table > tfoot > tr > th.danger,
+article table > thead > tr.danger > td,
+article table > tbody > tr.danger > td,
+article table > tfoot > tr.danger > td,
+article table > thead > tr.danger > th,
+article table > tbody > tr.danger > th,
+article table > tfoot > tr.danger > th { background-color: #f2dede; }
+
+article table > tbody > tr > td.danger:hover,
+article table > tbody > tr > th.danger:hover,
+article table > tbody > tr.danger:hover > td,
+article table > tbody > tr:hover > .danger,
+article table > tbody > tr.danger:hover > th { background-color: #ebcccc; }
+
+.label a { color: white; }
+
 .border {
     border: #ccc 1px solid;
     border-radius: 5px;
@@ -13,18 +177,16 @@
     box-shadow: #f5deb3 0px 0px 3px inset;
 }
 
-.box-left.box-right {
-    margin-top: 5px;
-}
+.box-left.box-right { margin-top: 5px; }
 
 .box-left {
     border: #ccc 1.5px solid;
     border-radius: 8px;
     box-shadow: #f5deb3 0px 0px 3px inset;
 }
-.box-right {
-    padding-right: 0;
-}
+
+.box-right { padding-right: 0; }
+
 .box-right .panel {
     background-color: transparent;
     border-radius: 8px;
@@ -32,88 +194,67 @@
     box-shadow: 0 0 3px;
 }
 
-.box-right .panel .panel-body {
-    padding: 2px;
-}
+.box-right .panel .panel-body { padding: 2px; }
 
-.box-right .panel .panel-body .list-group {
-    margin-bottom: 0;
-}
+.box-right .panel .panel-body .list-group { margin-bottom: 0; }
 
 .box-right .panel .panel-body .list-group-item {
     background-color: transparent;
     padding: 2px;
     font-size: 16px;
 }
-.orderby {
-    z-index: 10;
-}
 
-.blog h2 {
-    font-weight: 700
-}
+.orderby { z-index: 10; }
 
-.blog .btn, .blog h5 {
-    margin: 0 0 5px
-}
+.blog h2 { font-weight: 700 }
 
+.blog .btn, .blog h5 { margin: 0 0 5px }
 
-.wrapper-content {
-    padding: 10px 0;
-}
 
-.ibox.ui-sortable-placeholder {
-    margin: 0 0 23px !important
-}
+.wrapper-content { padding: 10px 0; }
+
+.ibox.ui-sortable-placeholder { margin: 0 0 23px !important }
 
 .ibox-content.text-box {
     padding-bottom: 0;
     padding-top: 15px
 }
 
-.ui-draggable .ibox-title {
-    cursor: move
-}
-.history {
-    background-image: url(https://bkssl.bdimg.com/static/wiki-lemma/history/img/watermark-transparent_5444b91.png);
-}
+.ui-draggable .ibox-title { cursor: move }
+
+.history { background-image: url(https://bkssl.bdimg.com/static/wiki-lemma/history/img/watermark-transparent_5444b91.png); }
+
 .ibox {
     clear: both;
     margin-bottom: 10px;
     margin-top: 0;
     padding: 0
 }
-.ibox-content > a[href] {
-    text-decoration: none;
+
+.ibox-content > a[href] { text-decoration: none; }
+
+.ibox-content > a[href] h4 {
+    color: #3f3f3f;
+    margin: 0 0 15px 0;
+    letter-spacing: 1px;
+    font-weight: bold;
+    font-size: 20px;
+    transition: ease-in-out .25s;
 }
-    .ibox-content > a[href] h4 {
-        color: #3f3f3f;
-        margin: 0 0 15px 0;
-        letter-spacing: 1px;
-        font-weight: bold;
-        font-size: 20px;
-        transition: ease-in-out .25s;
-    }
+
 .ibox-content > a[href] > h1:hover, .ibox-content > a[href] > h2:hover, .ibox-content > a[href] > h3:hover, .ibox-content > a[href] > h4:hover, .ibox-content > a[href] > h5:hover, .ibox-content > a[href] > h6:hover {
     color: cadetblue;
-    transform:scale(1.01,1.1);
+    transform: scale(1.01, 1.1);
     transition: ease-in-out .25s;
 }
-.ibox.collapsed .ibox-content {
-    display: none
-}
 
-.ibox.collapsed .fa.fa-chevron-up:before {
-    content: "\f078"
-}
+.ibox.collapsed .ibox-content { display: none }
 
-.ibox.collapsed .fa.fa-chevron-down:before {
-    content: "\f077"
-}
+.ibox.collapsed .fa.fa-chevron-up:before { content: "\f078" }
 
-.ibox:after, .ibox:before {
-    display: table
-}
+.ibox.collapsed .fa.fa-chevron-down:before { content: "\f077" }
+
+.ibox:after, .ibox:before { display: table }
 
 .ibox-title {
     -moz-border-bottom-colors: none;
@@ -150,41 +291,40 @@
     word-break: break-all;
 }
 
-    .ibox-content p {
-        line-height: 24px;
-        word-break: break-all;
-    }
-    .ibox-content pre {
-        overflow: hidden;
-        word-wrap: break-word;
-        word-break: break-all;
-        white-space: pre-line;
-    }
+.ibox-content p {
+    line-height: 24px;
+    word-break: break-all;
+}
 
-    .ibox-content div.col-sm-3 {
-        text-align: center;
-    }
+.ibox-content pre {
+    overflow: hidden;
+    word-wrap: break-word;
+    word-break: break-all;
+    white-space: pre-line;
+}
 
-    .ibox-content div.col-md-3 {
-        text-align: center;
-    }
+.ibox-content div.col-sm-3 { text-align: center; }
 
-.article>.ibox>.ibox-content>main header.page-header a h2 {
+.ibox-content div.col-md-3 { text-align: center; }
+
+.article > .ibox > .ibox-content > main header.page-header a h2 {
     font-size: 24px;
     line-height: 32px;
 }
 
-.article>.ibox>.ibox-content>main p {
+.article > .ibox > .ibox-content > main p {
     font-size: 15px;
     line-height: 22px;
     word-break: break-all;
 }
+
 .ibox-content .thumb {
     max-height: 125px;
     transition: ease-in-out .3s;
     overflow: hidden;
 }
-.ibox-content article.article h3,.ibox-content section h3, .ibox-content section.row h3 {
+
+.ibox-content article.article h3, .ibox-content section h3, .ibox-content section.row h3 {
     font-size: 24px;
     margin-top: 10px;
     margin-bottom: 6px;
@@ -198,7 +338,8 @@
     user-select: text !important;
     font-family: 微软雅黑, Tahoma, Helvetica, SimSun, sans-serif;
 }
-.ibox-content article.article h4,.ibox-content section h4, .ibox-content section.row h4 {
+
+.ibox-content article.article h4, .ibox-content section h4, .ibox-content section.row h4 {
     font-size: 20px;
     margin-top: 6px;
     margin-bottom: 3px;
@@ -212,7 +353,8 @@
     user-select: text !important;
     font-family: 微软雅黑, Tahoma, Helvetica, SimSun, sans-serif;
 }
-.ibox-content article.article h5,.ibox-content section h5, .ibox-content section.row h5 {
+
+.ibox-content article.article h5, .ibox-content section h5, .ibox-content section.row h5 {
     font-size: 18px;
     margin-top: 4px;
     margin-bottom: 2px;
@@ -226,7 +368,8 @@
     user-select: text !important;
     font-family: 微软雅黑, Tahoma, Helvetica, SimSun, sans-serif;
 }
-.ibox-content article.article h6,.ibox-content section h6, .ibox-content section.row h6 {
+
+.ibox-content article.article h6, .ibox-content section h6, .ibox-content section.row h6 {
     font-size: 16px;
     white-space: normal;
     padding: 0 0 2px 20px;
@@ -238,19 +381,21 @@
     user-select: text !important;
     font-family: 微软雅黑, Tahoma, Helvetica, SimSun, sans-serif;
 }
+
 .ibox-content .thumb:hover {
     transform: scale(1.1);
     transition: ease-in-out .3s;
 }
+
 .ibox-heading {
     background-color: #f3f6fb;
     border-bottom: none
 }
 
-    .ibox-heading h3 {
-        font-weight: 200;
-        font-size: 24px;
-    }
+.ibox-heading h3 {
+    font-weight: 200;
+    font-size: 24px;
+}
 
 .ibox-title h5 {
     font-size: 14px;
@@ -278,9 +423,7 @@
     color: #c4c4c4
 }
 
-.ibox-tools a.btn-primary {
-    color: #fff
-}
+.ibox-tools a.btn-primary { color: #fff }
 
 .ibox-tools .dropdown-menu > li > a {
     padding: 4px 10px;
@@ -292,13 +435,10 @@
     right: 0
 }
 
-.chat-view .ibox-content {
-    padding: 0
-}
+.chat-view .ibox-content { padding: 0 }
+
+.article .ibox-content { padding: 20px }
 
-.article .ibox-content {
-    padding: 20px
-}
 .fixtop {
     font-size: 24px;
     color: red;
@@ -309,15 +449,11 @@
     color: green;
 }
 
-.float-e-margins .btn {
-    margin-bottom: 5px
-}
-.search-form {
-    margin-top: 10px
-}
-.file-manager .hr-line-dashed {
-    margin: 15px 0
-}
+.float-e-margins .btn { margin-bottom: 5px }
+
+.search-form { margin-top: 10px }
+
+.file-manager .hr-line-dashed { margin: 15px 0 }
 
 .hr-line-dashed {
     border-top: 1px dashed #F5afA5;
@@ -326,28 +462,30 @@
     height: 1px;
     margin: 5px 0
 }
+
 .search-result h3 {
     margin-bottom: 0;
     color: #1E0FBE
 }
 
-.search-result .search-link {
-    color: #006621
-}
+.search-result .search-link { color: #006621 }
 
 .search-result p {
     font-size: 12px;
     margin-top: 5px
 }
+
 #cyReward {
     margin-top: 10px;
     position: relative;
     text-align: center;
 }
-    #cyReward #cy-reward-pop {
-        top: auto !important;
-        margin-top: -500px !important
-    }
+
+#cyReward #cy-reward-pop {
+    top: auto !important;
+    margin-top: -500px !important
+}
+
 .changyan-overlay-outer {
     position: fixed !important;
     top: 50% !important;
@@ -355,6 +493,7 @@
     opacity: 1;
     transform: translate(-50%);
 }
+
 .protected {
     border: 1px dashed #F60;
     padding: 10px;