mhulse / css-issues

Practical CSS code snippets and examples.
11 stars 1 forks source link

Table with alternating colors for rows and columns #198

Open mhulse opened 5 years ago

mhulse commented 5 years ago
table {
    width: 100%;
    background: #fff;
    margin: 1rem 0;
    display: inline-table;
    border-collapse: collapse;
    empty-cells: hide;
}
table caption {
    text-align: left;
}
table thead {
    font-size: 1.6rem;
    font-weight: bold;
    vertical-align: bottom;
    text-align: center;
}
table tfoot {
    vertical-align: top;
}
table th,
table td {
    border: 1px solid rgba(0, 0, 0, 0.3);
    padding: 0.5rem;
}
table tbody {
    vertical-align: top;
    font-size: 1.4rem;
}

.ap_table-bright thead {
    color: #fff;
}
.ap_table-bright thead th:nth-child(odd) {
    background: #FF2600;   
}
.ap_table-bright thead th:nth-child(even) {
    background: #008F01;   
}
.ap_table-bright col:nth-child(odd) {
    background: #FF9B8A;
}
.ap_table-bright col:nth-child(even){
    background: #A4C67D;
}
.ap_table-bright tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.5);
}

<table class="ap_table ap_table-bright">
    <colgroup>
        <col style="width: 50%">
        <col style="width: 50%">
    </colgroup>
    <thead>
        <tr>
            <th>Don’t focus only on his drinking</th>
            <th>Focus on his behavior</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>You’re a mean drunk</td>
            <td>You <b>grabbed</b> and <b>hurt</b> me when you came home drunk.</td>
        </tr>
        <tr>
            <td>You drank way too much at the party last night.</td>
            <td>You got <b>drunk</b> and called Sue a slut at the party last night.</td>
        </tr>
        <tr>
            <td>You drank too much last night.</td>
            <td>You <b>passed out</b> in front of the kids …</td>
        </tr>
    </tbody>
</table>