Exemple de comment créer un tableau avec un menu horizontal déroulant en fixant la première colonne ?
Table des matières
Code source
Un exemple de tableau (inspiré de l'example sur codepen)
Résultat si on bouge l'ascenseur horizontal vers la droite:
Voici le code source permettant de reproduire le tableau présenté sur les images:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.table-scroll {
position:relative;
margin:auto;
}
.table-wrap {
width:100%;
overflow:auto;
}
.table-scroll table {
width:100%;
margin:auto;
border-collapse:separate;
border-spacing:0;
}
.table-scroll th, .table-scroll td {
padding:10px 10px;
background:#fff;
white-space:nowrap;
vertical-align:top;
font-size: 15px;
font-family: Yellowtail;
color: black;
}
tr {
text-align: center;
}
.clone {
position:absolute;
top:0;
left:0;
pointer-events:none;
}
.clone th, .clone td {
visibility:hidden;
}
.clone td, .clone th {
border-color:transparent
}
.clone tbody th {
visibility:visible;
}
.clone .fixed-side {
visibility:visible;
font-size: 14px;
font-family: Yellowtail;
color: #06a;
}
</style>
</head>
<body>
<div id="table-scroll" class="table-scroll" style='max-width:500px;margin-top: 200px;'>
<div class="table-wrap">
<table class="main-table">
<thead>
<tr>
<th class="fixed-side" scope="col"> </th>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
<th scope="col">Header 5</th>
<th scope="col">Header 6</th>
<th scope="col">Header 7</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed-side">Product row 1</th>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
</tr>
<tr>
<th class="fixed-side">Product row 2</th>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
</tr>
<tr>
<th class="fixed-side">Product row 3</th>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
</tr>
<tr>
<th class="fixed-side">Product row 4</th>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
</tr>
<tr>
<th class="fixed-side">Product row 5</th>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
</tr>
<tr>
<th class="fixed-side">Product row 6</th>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
<td>3.1415</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
jQuery(document).ready(function() {
jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
});
</script>
</body>
</html>
Références
Liens | Site |
---|---|
Bootstrap4 Responsive Table - Fixed first column | stackoverflow |
Can I lock the first column in a Twitter Bootstrap Table? | stackoverflow |
codepen | codepen |
Making a Bootstrap table column fit to content | stackoverflow |
Table | mdbootstrap |
Make one column fixed with horizontal scroll using Bootstrap? | stackoverflow |
jsfiddle | jsfiddle |
Table fixed header and scrollable body | stackoverflow |
Tables | getbootstrap |