Перевод в табличный вид
Вопрос к знатокам css..или людям, чьи знания намного выше моих :)
Однажды нашел на codepen пример "таблицы", которая мне зашла..немного перегнав ее под себя встала нужда сделать из нее таблицу через table thead и т.п
Собственно сама таблица на codepen - https://codepen.io/ajlohman/pen/tLvdF (для понимания о чем речь)
Подскажите, как переделать данный вид "таблицы" из того, чем она является сейчас, в table вид
CSS предпочтительно взять этот , а структуру таблицы - без разницы :)
.nfl a, .mlb a, .nhl a, .pga a {
text-decoration: none;
transition: color 0.2s ease-out;
}
.nfl a {
color: #4fc0d2;
}
.nfl a:hover {
color: #268695;
}
.mlb a {
color: #52d29a;
}
.mlb a:hover {
color: #279766;
}
.nhl a {
color: rgba(231, 196, 104, 0.7);
}
.nhl a:hover {
color: rgba(201, 154, 32, 0.7);
}
.pga a {
color: #e74c3c;
}
.pga a:hover {
color: #c0392b;
}
/* wrapper */
.wrapper-table {
width: 100%;
max-width: 1000px;
margin: 20px auto 100px auto;
padding: 0;
color: rgba(255, 255, 255, 0.9);
overflow: hidden;
position: relative;
font-family: 'Open Sans', sans-serif;
}
/* lists */
.rowg ul {
margin: 0;
padding: 0;
}
.rowg ul li {
margin: 0;
font-size: 16px;
font-weight: normal;
list-style: none;
display: inline-block;
width: 20%;
box-sizing: border-box;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
.rowg ul li {
font-size: 13px;
}
}
@media only screen and (max-width: 479px) {
.rowg ul li {
font-size: 13px;
}
}
.title ul li {
padding: 15px 13px;
}
.rowg ul li {
padding: 5px 10px;
}
/* rowgs */
.rowg {
padding: 20px 0;
height: 65px;
font-size: 0;
position: relative;
overflow: hidden;
transition: all 0.2s ease-out;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background: white;
color: black;
}
a.go-arb{
padding: 10px;
background: #e74c3c;
color: white;
transition: all .3s;
font-size: 15px;
border-radius: 10px;
cursor: pointer;
}
a.go-trade{
padding: 10px;
background: #27ae60;
color: white;
transition: all .3s;
font-size: 15px;
border-radius: 10px;
cursor: pointer;
}
.no-change{
color: white;
}
.rowg:hover {
background-color: #303030;
height: 110px;
color: white;
}
a.go-arb:hover {
background-color: #ca4a3d;
color: white;
}
a.go-trade:hover {
background-color: #1f9250;
color: white;
}
@media only screen and (max-width: 767px) {
.rowg:hover {
height: 125px;
}
}
@media only screen and (max-width: 359px) {
.rowg:hover {
height: 105px;
}
}
.title {
padding: 25px 0 5px 0;
height: 75px;
font-size: 0;
background-color: rgba(255, 255, 255, 0.1);
border-left: 3px solid rgba(255, 255, 255, 0.1);
background-color: rgba(26, 26, 26, 0.9);
}
.title:hover {
height: 75px;
/* background-color: rgba(255, 255, 255, 0.1); */
border-left: 3px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (max-width: 767px) {
.title-hide {
display: none;
}
.notif
{
padding-bottom: 50px;
}
}
.nfl {
border-left: 3px solid #1c616c;
}
.nfl:hover {
border-left: 3px solid #4fc0d2;
}
.mlb {
border-left: 3px solid #1d6e4b;
}
.mlb:hover {
border-left: 3px solid #52d29a;
}
.nhl {
border-left: 3px solid rgba(157, 121, 25, 0.7);
}
.nhl:hover {
border-left: 3px solid rgba(231, 196, 104, 0.7);
}
.pga {
border-left: 3px solid #e74c3c;
}
.pga:hover {
border-left: 3px solid #eb7655;
}
/* more content */
ul.more-content li {
position: relative;
top: 8px;
font-size: 13px;
margin: 0;
padding: 10px 13px;
display: block;
height: 50px;
width: 100%;
color: rgba(128, 128, 128, 0.9);
}
@media only screen and (max-width: 767px) {
ul.more-content li {
font-size: 11px;
}
}
/* small content */
.small {
color: rgba(102, 102, 102, 0.9);
font-size: 10px;
padding: 0 10px;
margin: 0;
}
@media only screen and (max-width: 767px) {
.small {
display: none;
}
}
А вот то, чего удалось достичь моими кривыми руками

С меня огромное спасибо и копеечка на чай (если тут можно поощрять исполнителей)