Táblázatok

normál táblázat

Cella neve Cella neve Cella neve Cella neve
Cella értéke Cella értéke Cella értéke Cella értéke
Cella értéke Cella értéke Cella értéke Cella értéke
Cella értéke Cella értéke Cella értéke Cella értéke
html
<table class="table">
    <thead>
        <tr>
            <th>Cella neve</th>
            <th>Cella neve</th>
            <th>Cella neve</th>
            <th>Cella neve</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
        </tr>
        <tr>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
        </tr>
        <tr>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
        </tr>
    </tbody>
</table>
css
.table>thead:first-child>tr:first-child>th {
     font-weight: 700;
     font-size: 0.8rem;
}
.table>thead:first-child>tr:first-child>td, 
.table>thead:first-child>tr:first-child>th {
     border-top: none;
}
.table>thead>tr>th {
     border-bottom: 1px solid #ccc;
     text-transform: uppercase;
     font-size: 0.8rem;
}
.table>tbody>tr>td, .table>tbody>tr>td a {
     font-size: 0.8rem;
}

Vonalas táblázat

Cella neve Cella neve Cella neve Cella neve
Cella értéke Cella értéke Cella értéke Cella értéke
Cella értéke Cella értéke Cella értéke Cella értéke
Cella értéke Cella értéke Cella értéke Cella értéke
html
<table class="table table-bordered">
    <thead>
        <tr>
            <th>Cella neve</th>
            <th>Cella neve</th>
            <th>Cella neve</th>
            <th>Cella neve</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
        </tr>
        <tr>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
        </tr>
        <tr>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
        </tr>
    </tbody>
</table>
css
.table>thead:first-child>tr:first-child>td,
.table>thead:first-child>tr:first-child>th {
     border-top: none;
}
 .table>thead>tr>th {
     border-bottom: 1px solid #ccc;
     text-transform: uppercase;
     font-size: 0.8rem;
}
 .table>tbody>tr>td, .table>tbody>tr>td a {
     font-size: 0.8rem;
}
 .table-bordered {
     border: 1px solid #c2cddb;
}

Sávos táblázat

Cella neve Cella neve Cella neve Cella neve
Cella értéke Cella értéke Cella értéke Cella értéke
Cella értéke Cella értéke Cella értéke Cella értéke
Cella értéke Cella értéke Cella értéke Cella értéke
html
<table class="table table-striped">
    <thead>
        <tr>
            <th>Cella neve</th>
            <th>Cella neve</th>
            <th>Cella neve</th>
            <th>Cella neve</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
        </tr>
        <tr>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
        </tr>
        <tr>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
        </tr>
    </tbody>
</table>
css
.table>thead:first-child>tr:first-child>td, 
.table>thead:first-child>tr:first-child>th {
     border-top: none;
}
 .table>thead:first-child>tr:first-child>th {
     font-weight: 700;
}
.table-striped>tbody>tr:nth-of-type(odd) {
     background-color: #f2f2f2;
}
.table>tbody>tr>td, 
.table>tbody>tr>td a {
     font-size: 0.8rem;
}

Hower táblázat

Cella neve Cella neve Cella neve Cella neve
Cella értéke Cella értéke Cella értéke Cella értéke
Cella értéke Cella értéke Cella értéke Cella értéke
Cella értéke Cella értéke Cella értéke Cella értéke
html
<table class="table table-hover">
    <thead>
        <tr>
            <th>Cella neve</th>
            <th>Cella neve</th>
            <th>Cella neve</th>
            <th>Cella neve</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
        </tr>
        <tr>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
        </tr>
        <tr>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
            <td>Cella értéke</td>
        </tr>
    </tbody>
</table>
css
.table>thead:first-child>tr:first-child>th {
     font-weight: 700;
     font-size: 0.8rem;
}
 .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {
     border-top: none;
}
 .table>thead>tr>th {
     border-bottom: 1px solid #ccc;
     text-transform: uppercase;
     font-size: 0.8rem;
}
 .table>tbody>tr>td, .table>tbody>tr>td a {
     font-size: 0.8rem;
}
 .table-hover>tbody>tr:hover {
     background-color: #f2f2f2;
}