0

Problema : Definirle un ancho a la primera columna, que esta quede fija, y que el scroll este sobre las demás columnas.

Esperado : introducir la descripción de la imagen aquí

Requisitos : El único requisito es que debe estar realizado en BOOTSTRAP 3 con CSS3.

Actual :

table {
    overflow-x: auto;
    display: block;
    white-space: nowrap;
}

.fijar
{
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
<div class="row">

<table cellspacing="0" width="100%" class="table table-bordered table-responsive display compact no-wrap">
    <thead>
        <tr id="chargedaysheader">
            <th width="60%" class="headcol" rowspan="2" style="width: 30%;color: white; clear: both; table-layout: fixed; text-align: center; vertical-align: middle; background-color: #0094ff;">FIXED</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
        </tr>
        <tr id="chargelegendheader">
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
        </tr>
    </thead>
    <tbody id="chargetabledata">
        <tr>
           <td class="fijar">FIXED</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
        </tr>
        <tr>
            <td class="fijar">FIXED</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>1.9T</td>
            <td>38.1%</td>
            <td>15.0T</td>
            <td>83.6%</td>
            <td>8.6T</td>
            <td>22.6%</td>
        </tr>
        <tr>
            <td class="fijar">FIXED</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
        </tr>
        <tr>
              <td class="fijar">FIXED</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>7.5T</td>
            <td>43.6%</td>
            <td>19.4T</td>
            <td>41.0%</td>
            <td>27.7T</td>
            <td>74.0%</td>
        </tr>
        <tr>
              <td class="fijar">FIXED</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>12.0T</td>
            <td>100.0%</td>
            <td>7.6T</td>
            <td>38.9%</td>
            <td>532.8T</td>
            <td>5.7%</td>
        </tr>
    </tbody>
</table>

</div>
</div>

2
  • ¿El html no puede cambiar? Digo porque así tal cual como esta, más que dificil lograrlo es algo "imposible" de lograr. Aunque creo que es posible hacerlo, pero modificando el Html ya que se podría emular algo muy similar via css, pero no aseguro solo con bootstrap, sino más bien usando un arsenal CSS3 a la medida (aunque compatible con la versión que usas del framework). ¿Que me dices? Commented el 27 ene. 2018 a las 1:25
  • la idea sería que no cambie el HTML, pero si me comentas que es imposible lograrlo de otro modo, me gustaría ver la propuesta. Saludos!
    – nawelittle
    Commented el 29 ene. 2018 a las 13:30

2 respuestas 2

2

Revisa el siguiente ejemplo de nuestros amigos de stackoverflow en ingles

        body { font:16px Calibri;}
        table { border-collapse:separate; border-top: 3px solid grey; }
        td, th {
            margin:0;
            border:3px solid grey; 
            border-top-width:0px; 
            white-space:nowrap;
        }
        div { 
            width: 600px; 
            overflow-x:scroll;  
            margin-left:5em; 
            overflow-y:visible;
            padding-bottom:1px;
        }
        .headcol {
            position:absolute; 
            width:5em; 
            left:0;
            top:auto;
            border-right: 0px none black; 
            border-top-width:3px; /*solo primera fila*/
            margin-top:-4px; /*compensa el borde superior*/
        }
        .headcol:before {content: 'fila ';}
        .long { background:#ccc; letter-spacing:1em; }
<div><table>
        <tr><th class="headcol">1</th><td class="long">ABCDEFGHIJKLMNOPQRSTUVWXYZ</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">2</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
        <tr><th class="headcol">3</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
        <tr><th class="headcol">4</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
        <tr><th class="headcol">5</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
        <tr><th class="headcol">6</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
        
</table></div>

1
  • No funciona en mi ejemplo. Como dije arriba estoy utilizando Bootstrap 3, y en el primer TH estoy usando rowspan="2".
    – nawelittle
    Commented el 23 ene. 2018 a las 16:50
1

Basado en esta respuesta de SO

Según lo que nos dice la W3C en cuanto a posicionar y flotar celdas de una tabla

Posicionar y flotar celdas en una tabla puede hacer que ya no sean celdas, de acuerdo a las reglas en la sección 9.7. Cuando se usa a flotación, las reglas en los objetos anónimos de las tablas pueden causar que una celda anónima también sea creada.

Osea que si utilizamos position: absolute que es la única manera que se me ocurre hacerlo, da igual usar rowspan ya que las celda no será representada como parte de la tabla.

Dicho eso una solución puede ser declarar el doble de alto al th que usarás como header, y declarar un th "invisible" para que nos ayude con la segunda fila.

Siento que hay una gran desventaja con esta solución y es que necesitamos saber el alto de las dos primeras filas y el ancho de la columna que quedará fija, pero es la única manera que encontré de hacerlo.

table {
  overflow-x: auto;
  display: block;
  white-space: nowrap;
}

th {
  height: 4rem; /* Alto fijo de las dos primeras filas */
}

.fijar-headcol {
  position: absolute;
  height: 8rem; /*Doble de alto de la primera fila*/
  background-color: #0F0;
  /* Centramos */
  display: flex !important;
  justify-content: center;
  align-items: center;
  color: #FFF;
}

.headcol {
  display: block;
  width: 8rem; /* Ancho fijo de la primera columna */
}

.fijar {
  position: absolute;
  width: 8rem; /* Ancho fijo de la primera columna */
  background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <table cellspacing="0" width="100%" class="table table-bordered table-responsive display compact no-wrap">
        <thead>
          <tr id="chargedaysheader">
            <th class="headcol fijar-headcol">FIXED</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
            <th colspan="2">X</th>
          </tr>
          <tr id="chargelegendheader">
            <th scope="row" class="headcol">
              <div class="sr-only">FIXED</div>
            </th><!-- Utilizo esto para lograr un espacio entre las th fijas y las td, de paso nos ayudará con la accesibilidad -->
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
            <th>XXXXXXXXXXXX</th>
          </tr>
        </thead>
        <tbody id="chargetabledata">
          <tr>
            <th scope="row" class="fijar">FIXED</th>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
          </tr>
          <tr>
            <th scope="row" class="fijar">FIXED</th>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>0.0T</td>
            <td>100.0%</td>
            <td>1.9T</td>
            <td>38.1%</td>
            <td>15.0T</td>
            <td>83.6%</td>
            <td>8.6T</td>
            <td>22.6%</td>
          </tr>
          <tr>
            <th scope="row" class="fijar">FIXED</th>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
            <td>0.0T</td>
            <td>0.0%</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.