CSS Table Design

by humanzing

HTML

<div class="ant-table-wrapper bybt-table"><div class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-ping-right ant-table-scroll-horizontal"><div class="ant-table-container"><div style="overflow:hidden;top:0" class="ant-table-header ant-table-sticky-holder"><table style="table-layout:fixed"><colgroup><col style="width: 104px;"><col style="width: 104px;"><col style="width: 104px;"><col style="width: 104px;"><col style="width: 104px;"></colgroup><thead class="ant-table-thead"><tr><th class="ant-table-cell" style="text-align:center">Site</th><th class="ant-table-cell" style="text-align:center">Time</th><th class="ant-table-cell" style="text-align:center">Pair</th><th class="ant-table-cell" style="text-align:center">Quantity</th><th class="ant-table-cell" style="text-align:center">Price($)</th></tr></thead></table></div><div style="overflow-x:auto;overflow-y:hidden" class="ant-table-body"><table style="width:520px;min-width:100%;table-layout:fixed"><colgroup></colgroup><tbody class="ant-table-tbody"><tr aria-hidden="true" class="ant-table-measure-row" style="height:0;font-size:0"><td style="padding:0;border:0;height:0"><div style="height:0;overflow:hidden">&nbsp;</div></td><td style="padding:0;border:0;height:0"><div style="height:0;overflow:hidden">&nbsp;</div></td><td style="padding:0;border:0;height:0"><div style="height:0;overflow:hidden">&nbsp;</div></td><td style="padding:0;border:0;height:0"><div style="height:0;overflow:hidden">&nbsp;</div></td><td style="padding:0;border:0;height:0"><div style="height:0;overflow:hidden">&nbsp;</div></td></tr><tr data-row-key="69749207" class="ant-table-row ant-table-row-level-0"><td class="ant-table-cell" style="text-align: center;"><div class="bybt-exname-logo bybt-justify-center"><img style="margin-top: -3px;" src="https://cdn.coinglasscdn.com/static/exchanges/270.png" class="css-1ifhear"><div class="bybt-font-normal  pl5">Binance&nbsp;</div></div></td><td class="ant-table-cell"...

CSS

body {
    font-family: sans-serif;
}
hgroup {
    margin: 0 auto;
    text-align: center;
    width: 500px;
}
h1 {
    color: #333;
    font-size: 30px;
    font-weight: bold;
    line-height: 40px;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.75);
}
h2 {
    color: #777;
    font-family: serif;
    font-style: italic;
    line-height: 24px;
    margin-bottom: 24px;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.75);
}
table {
    background: #f6f6f6;
    font-size: 14px;
    margin: 0 auto;
    -webkit-box-shadow: 0 0 10px hsla(0,0%,0%,.05),
                        0 0 200px hsla(0,0%,100%,.5);
       -moz-box-shadow: 0 0 10px hsla(0,0%,0%,.05),
                        0 0 200px hsla(0,0%,100%,.5);
            box-shadow: 0 0 10px hsla(0,0%,0%,.05),
                        0 0 200px hsla(0,0%,100%,.5);
}
thead {
    background-color: #f9f9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0,0%,0%,0)), to(hsla(0,0%,0%,.1)));
    background-image: -webkit-linear-gradient(top, hsla(0,0%,0%,0), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(top, hsla(0,0%,0%,0), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(top, hsla(0,0%,0%,0), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(top, hsla(0,0%,0%,0), hsla(0,0%,0%,.1));
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    font-weight: bold;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.75);
}
thead td {
    border: none;
    color: #444;
}
.posts, .snaps, .acorns, .ranking {
    text-align: center;
}
.name {
    width: 150px;
}
.posts {
    width: 50px;
}
.snaps {
    width: 50px;
}
.acorns {
    width: 50px;
}
.ranking {
    width: 100px;
}
tr:nth-child(2n) {  
   background: #eee;  
}
td {
    border: 1px solid #ccc;
    color: #777;
    padding: 15px 10px;
}
.admin {
    color: #c4453c;
}
.supporter {
    color: #207cca;
}