Table CSS

테이블 정렬하기

.table {
    width: 80%;
    max-width: 800px;
    margin: auto;
    table-layout: fixed;
    border-collapse: collapse;
}

td {
    background-color: white;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

 

 

둥글게 깎기

thead:first-child tr:first-child th:first-child {
    border-radius: 10px 0 0 0;
}

thead:first-child tr:first-child th:last-child {
    border-radius: 0 10px 0 0;
}

tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 10px;
}

tbody:last-child tr:last-child td:last-child {
    border-radius: 0 0 10px 0;
}

 

둥글게 깎은 후 깔끔하게 선 정리하기

.table th {
    border-top-style: none;
}