span {
    display: inline-block;
    text-align: center;
}

table {
    border-spacing: 0;
}

tr {
    text-align: center;
}

td {
    padding: 0px 10px;
}

thead {
    background: #faf;
}


tr[class="read"] {
    background-image: linear-gradient(#cfc, #2f2, #bfb);
}
tr[class="to-read"] {
    background-image: linear-gradient(#fbb, #f22, #fbb);
}
tr[class="in-progress"] {
    background-image: linear-gradient(#bbf, #55f, #bbf);
}

span[class="status"] {
    border-radius: 20px;
}

tr[class="read"] span[class="status"] {
    border: 1px green solid;
    background-image: linear-gradient(#fff, #fff);
}
tr[class="to-read"] span[class="status"] {
    border: 1px red solid;
    background-image: linear-gradient(#fff, #fff);
}
tr[class="in-progress"] span[class="status"] {
    border: 1px blue solid;
    background-image: linear-gradient(#fff, #fff);
}

span[class="status"], span[class^="rate"] {
    height: 25px;
    width: 100px;
    padding: 5px;
}

span[class^="rate"] > span {
    border: 1px solid black;
    border-radius: 10px;
    margin: 3px;
    height: 15px;
    width: 15px;
    background-color: white;
}

span[class~="one"] > :first-child {
    background-image: linear-gradient(90deg, yellow, yellow);
}

span[class~="two"] > :nth-child(-n+2) {
    background-image: linear-gradient(90deg, yellow, yellow);
}

span[class~="three"] > span {
    background-image: linear-gradient(90deg, yellow, yellow);
}