html - tabla - Fijar columnas en desplazamiento horizontal.
inmovilizar columnas bootstrap (3)
Actualmente estoy intentando arreglar mi primera columna en una tabla cuando el usuario se desplaza en el eje X. Estoy usando esta estructura:
<div class="table-wrapper">
<table id="consumption-data" class="data">
<thead class="header">
<tr>
<th>Month</th>
<th>Item 1</th>
</tr>
</thead>
<tbody class="results">
<tr>
<th>Jan</th>
<td>3163</td>
</tr>
<tr>
<th>Feb</th>
<td>3163.7</td>
</tr>
<tr>
<th>Mar</th>
<td>3163.7</td>
</tr>
<tr>
<th>Apr</th>
<td>3163.7</td>
</tr>
<tr>
<th>May</th>
<td>3163.7</td>
</tr>
<tr>
<th>Jun</th>
<td>3163.7</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
</div>
El usuario elegirá la cantidad de elementos, es decir, podría haber 90 elementos en la tabla. Esto requerirá desplazamiento en el eje X. La pregunta que tengo sin embargo es:
¿Cómo puedo corregir la posición de las etiquetas th dentro del tbody (y th:first-child in the thead )?
He estado mirando otros hilos, sin embargo, realmente no explican cómo logro las columnas fijas, lo que me dificulta entender qué hacen los códigos y qué se supone que debo hacer.
También he comprobado las soluciones donde las personas dividen la cabecera-columna en otra tabla. Esto no será posible para mí porque exportaré los datos a otros sistemas más adelante.
Mi css
.table-wrapper {
overflow-x:scroll;
overflow-y:visible;
}
Esto arregla el desplazamiento, ahora viene el trabajo con:
tbody th,
thead th:first-child {}
¿Alguien tiene alguna idea?
EDITAR: Aquí hay un jsFiddle: http://jsfiddle.net/DJqPf/5/
Demostración: http://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/
HTML
<h2>TableHeadFixer Fix Left Column</h2>
<div id="parent">
<table id="fixTable" class="table">
<thead>
<tr>
<th>Ano</th>
<th>Jan</th>
<th>Fev</th>
<th>Mar</th>
<th>Abr</th>
<th>Maio</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>2012</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>550.00</td>
</tr>
<tr>
<td>2012</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>550.00</td>
</tr>
<tr>
<td>2012</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>550.00</td>
</tr>
<tr>
<td>2012</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>550.00</td>
</tr>
<tr>
<td>2012</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>110.00</td>
<td>550.00</td>
</tr>
</tbody>
</table>
</div>
JS
$(document).ready(function() {
$("#fixTable").tableHeadFixer({"head" : false, "right" : 1});
});
CSS
#parent {
height: 300px;
}
#fixTable {
width: 1800px !important;
}
Resuelto usando JavaScript + jQuery! Solo necesito una solución similar a mi proyecto, pero la solución actual con HTML y CSS no está bien para mí porque hay un problema con la altura de la columna + Necesito que se corrija más de una columna. Así que creo una solución javascript simple usando jQuery
Puede probarlo aquí https://jsfiddle.net/kindrosker/ffwqvntj/
Todo lo que necesita es la configuración de inicio. Muchas columnas se corregirán en el parámetro data-count-fixed-columns
<table class="table" data-count-fixed-columns="2" cellpadding="0" cellspacing="0">
y ejecuta la función js
app_handle_listing_horisontal_scroll($(''#table-listing''))
Resuelto
.table-wrapper {
overflow-x:scroll;
overflow-y:visible;
width:250px;
margin-left: 120px;
}
td, th {
padding: 5px 20px;
width: 100px;
}
th:first-child {
position: fixed;
left: 5px
}
ACTUALIZAR
$(function () {
$(''.table-wrapper tr'').each(function () {
var tr = $(this),
h = 0;
tr.children().each(function () {
var td = $(this),
tdh = td.height();
if (tdh > h) h = tdh;
});
tr.css({height: h + ''px''});
});
});
body {
position: relative;
}
.table-wrapper {
overflow-x:scroll;
overflow-y:visible;
width:200px;
margin-left: 120px;
}
td, th {
padding: 5px 20px;
width: 100px;
}
tbody tr {
}
th:first-child {
position: absolute;
left: 5px
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<h1>SOME RANDOM TEXT</h1>
</div>
<div class="table-wrapper">
<table id="consumption-data" class="data">
<thead class="header">
<tr>
<th>Month</th>
<th>Item 1</th>
<th>Item 2</th>
<th>Item 3</th>
<th>Item 4</th>
</tr>
</thead>
<tbody class="results">
<tr>
<th>Jan is an awesome month</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Feb</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Mar</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Apr</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>May</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Jun</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
</body>
</html>