table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
table-layout: fixed;
width: 100%; border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
@media screen and (max-width: 600px) {
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
}
}
th.one {
width: 80px;
}
th.two{
width: 100px;
}
th.three{
width: 130px;
}th.four{
width: 300px;
}
th.five{
width: 150px;
}th.five{
width: 110px;
}th.six{
width: 90px;
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter