Táblázatok
reszponzív, rendezhető táblázat
Implementált megoldás: Bootstrap Table
| ID |
Név |
oszlop a |
oszlop b |
oszlop c |
html
<table class="table"
id="table"
data-show-columns="true"
data-search="true"
data-pagination="true"
data-mobile-responsive="true"
data-check-on-init="true">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="nev" data-sortable="true">Név</th>
<th data-field="oszlopA" data-sortable="true">oszlop a</th>
<th data-field="oszlopB" data-sortable="true">oszlop b</th>
<th data-field="oszlopC" data-sortable="true">oszlop c</th>
</tr>
</thead>
</table>
JS
var $j = jQuery.noConflict();
$j(function () {
var $table = $j('#table');
var data = [
{
"id": 0,
"nev": "Item 0",
"oszlopA": "$0",
"oszlopB": "$0",
"oszlopC": "$0"
},
{
"id": 1,
"nev": "Item 1",
"oszlopA": "$1",
"oszlopB": "$1",
"oszlopC": "$1"
},
{
"id": 2,
"nev": "Item 2",
"oszlopA": "$2",
"oszlopB": "$2",
"oszlopC": "$2"
},
{
"id": 3,
"nev": "Item 3",
"oszlopA": "$3",
"oszlopB": "$3",
"oszlopC": "$3"
},
{
"id": 4,
"nev": "Item 4",
"oszlopA": "$4",
"oszlopB": "$4",
"oszlopC": "$4"
},
{
"id": 5,
"nev": "Item 5",
"oszlopA": "$5",
"oszlopB": "$5",
"oszlopC": "$5"
},
{
"id": 6,
"nev": "Item 6",
"oszlopA": "$6",
"oszlopB": "$6",
"oszlopC": "$6"
},
{
"id": 7,
"nev": "Item 7",
"oszlopA": "$7",
"oszlopB": "$7",
"oszlopC": "$7"
},
{
"id": 8,
"nev": "Item 8",
"oszlopA": "$8",
"oszlopB": "$8",
"oszlopC": "$8"
},
{
"id": 9,
"nev": "Item 9",
"oszlopA": "$9",
"oszlopB": "$9",
"oszlopC": "$9"
},
{
"id": 10,
"nev": "Item 10",
"oszlopA": "$10",
"oszlopB": "$10",
"oszlopC": "$10"
},
{
"id": 11,
"nev": "Item 11",
"oszlopA": "$11",
"oszlopB": "$11",
"oszlopC": "$11"
},
{
"id": 12,
"nev": "Item 12",
"oszlopA": "$12",
"oszlopB": "$12",
"oszlopC": "$12"
},
{
"id": 13,
"nev": "Item 13",
"oszlopA": "$13",
"oszlopB": "$13",
"oszlopC": "$13"
},
{
"id": 14,
"nev": "Item 9",
"oszlopA": "$9",
"oszlopB": "$9",
"oszlopC": "$9"
},
{
"id": 15,
"nev": "Item 9",
"oszlopA": "$9",
"oszlopB": "$9",
"oszlopC": "$9"
},
{
"id": 16,
"nev": "Item 16",
"oszlopA": "$16",
"oszlopB": "$16",
"oszlopC": "$16"
},
{
"id": 17,
"nev": "Item 17",
"oszlopA": "$17",
"oszlopB": "$17",
"oszlopC": "$17"
},
{
"id": 18,
"nev": "Item 18",
"oszlopA": "$18",
"oszlopB": "$18",
"oszlopC": "$18"
},
{
"id": 19,
"nev": "Item 19",
"oszlopA": "$19",
"oszlopB": "$19",
"oszlopC": "$19"
},
{
"id": 20,
"nev": "Item 20",
"oszlopA": "$20",
"oszlopB": "$20",
"oszlopC": "$20"
}
]
$table.bootstrapTable({
data: data
})
});
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;
}