Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table with alternating colors for rows and columns #198

Open
mhulse opened this issue Dec 4, 2018 · 0 comments
Open

Table with alternating colors for rows and columns #198

mhulse opened this issue Dec 4, 2018 · 0 comments

Comments

@mhulse
Copy link
Owner

mhulse commented Dec 4, 2018

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant