0

Básicamente necesito "fijar" la primera columna de una tabla para que al desplazarse hacia la derecha se siga mostrando, debido a que son muchas columnas y asi seria mas facil de entender la información. Intente haciendo algo similar a lo de este ejemplo, pero aunque se sobrepone parecido a lo que necesito, me surgen 2 problemas, el primero es que el ancho de la columna no es uniforme, sino que se ajusta al texto que contiene cada celda y segundo la columna (META), que está después de la que estoy fijando no se ve, ya que queda por debajo de la columna "fijada". ¿Como puedo lograr lo que necesito?

.table {
  width: 100%;
  margin-bottom: 0rem;
  color: #858796;
  display: block;
  overflow-x: auto;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #e3e6f0;
}

.table-bordered {
  border: 1px solid #e3e6f0;
}

.static {
  position: absolute;
  background-color: white;
}

.first-col {
  padding-left: 74.5px!important;
}
<table class="table table-bordered collaptable">
    <thead>
      <tr style="color:#555;font-size: 12px;" class="text-center">
        <th scope="col" colspan="5" class="align-middle text-center">5 GALONES (U)</th>
        <th scope="col" colspan="4" class="align-middle text-center">5 GALONES ($)</th>
        <th scope="col" colspan="4" class="align-middle text-center">NO RETORNABLE</th>
        <th scope="col" colspan="4" class="align-middle text-center">TOTAL</th>
      </tr>
    </thead>
    <tbody>
<tr>
<td class="static"><strong>SUPERVISOR</strong></td>
<td class="first-col"><strong>META</strong></td>
<td><strong>VENTA</strong></td>
<td><strong>PY</strong></td>
<td><strong>ALC</strong></td>
<td><strong>META</strong></td>
<td><strong>VENTA</strong></td>
<td><strong>PY</strong></td>
<td><strong>ALC</strong></td>
<td><strong>META</strong></td>
<td><strong>VENTA</strong></td>
<td><strong>PY</strong></td>
<td><strong>ALC</strong></td>
<td><strong>META</strong></td>
<td><strong>VENTA</strong></td>
<td><strong>PY</strong></td>
<td><strong>ALC</strong></td></tr>
<tr>
<td class="static">NOMBRE</td>
<td class="first-col">2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<td class="static">OTRO NOMBRE</td>
<td class="first-col">2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>

3 respuestas 3

1

Lo que podes intentar es ponerle un ancho fijo a la columna fija para solucionar el primer problema. Debes garantizar que cualquier celda de esta columna entre dentro del ancho que setees.

.static {
  position: absolute;
  background-color: white;
  width: 110px; 
}

Después para el segundo problema deberías tener en cuenta cual es el ancho de la columna fija dado que la columna fija tiene position: absolute

.first-col {
  padding-left: 150px!important; // un valor mayor a al ancho de la columna fija
}

Espero haberte ayudado!

1
  • Lo pruebo y te comento. Commented el 7 jul. 2020 a las 14:21
1

Hace tiempo hice una tabla parecida, y guarde el script, te lo comparto, la magia la hace colocarle a la columna que quieres que sea fija con position: sticky;

.table-scroll {
  position: relative;
  width:100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
  height: 350px;
}
.table-scroll table {
  width: 100%;
  min-width: 1280px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}
.table-wrap {
  position: relative;
}
.table-scroll th,
.table-scroll td {
  padding: 5px 10px;
  border: 1px solid #000;
  background: #fff;
  vertical-align: top;
}
.table-scroll thead th {
  background: #333;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.table-scroll tfoot,
.table-scroll tfoot th,
.table-scroll tfoot td {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #666;
  color: #fff;
  z-index:4;
}

th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ccc;
}
thead th:first-child,
tfoot th:first-child {
  z-index: 5;
}
<div id="table-scroll" class="table-scroll">
  <table id="main-table" class="main-table">
    <thead>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3 with longer content</th>
        <th scope="col">Header 4 text</th>
        <th scope="col">Header 5</th>
        <th scope="col">Header 6</th>
        <th scope="col">Header 7</th>
        <th scope="col">Header 8</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>First top Column</th>
        <td>Cell content<br>
          test </td>
        <td><a href="#">Cell content longer</a></td>
        <td>Cell content with more content and more content Cell </td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td><a href="#">Cell content longer</a></td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <th>Left Column<br>
          last</th>
        <td>Cell content</td>
        <td>Cell content longer</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Footer 1</th>
        <td>Footer 2</td>
        <td>Footer 3</td>
        <td>Footer 4</td>
        <td>Footer 5</td>
        <td>Footer 6</td>
        <td>Footer 7</td>
        <td>Footer 8</td>
      </tr>
    </tfoot>
  </table>
</div>

2
  • Si no es demasiado pedir, podrías aplicarlo al ejemplo que puse por favor, es que no he comprendido muy bien cómo debería aplicarse. Gracias desde ya. Commented el 7 jul. 2020 a las 14:21
  • Bro es simplemente cambiar texto Commented el 7 jul. 2020 a las 16:45
-1

Al final de varias búsquedas en SO, encontre esta respuesta la cual me ayudo junto con las otras respuestas de esta pregunta. Tal como me comentaron utilice la propiedad sticky en mi CSS, pero eso me llevó a otro problema, ya que tengo 2 encabezados de la tabla y con sticky solo uno de ellos se quedaba fijo, logre solucionarlo con jQuery tal como lo indicaba en la respuesta citada y al final logré el resultado esperado, quizá a alguien le resulte útil.

$(document).ready(function() { 
        var firstheight = $('.first').height();
        $("thead tr.second th, thead tr.second td").css("top", firstheight)
    });
.tablenm {
  width: 100%;
  margin-bottom: 0rem;
  font-family: sans-serif;
  font-size: 12px;
}

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  z-index: 2;
  border: 1px solid #e3e6f0;
}

thead tr:first-child {
  left: 0;
  z-index: 1;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
}

tbody tr {
  left: 0;
  top:0;
  z-index: 3;
}

table tbody:nth-of-type(1) tr:nth-of-type(1) td {
                border-top: none !important;
            }
            table thead th {
                border-top: none !important;
                border-bottom: none !important;
                box-shadow: inset 0 1px 0 #e3e6f0,
                            inset 0 -1px 0 #e3e6f0;
                padding: 2px 0;
            }
            table thead th {
                background-clip: padding-box
            }

td,
th {
  padding: 0em;
}

   thead tr.first th, thead tr.first td {
       position: sticky;
       position: -webkit-sticky; /* Safari */
       top: 0;
       background: #FFFFFF;
   }

   thead tr.second th, thead tr.second td {
       position: sticky;
       position: -webkit-sticky; /* Safari */
       background: #FFFFFF;
   }

.tablenm th,
.tablenm td {
  padding: 0.25rem;
  vertical-align: top;
  border-top: 1px solid #e3e6f0;
}

.tablenm thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #e3e6f0;
}

.tablenm tbody + tbody {
  border-top: 2px solid #e3e6f0;
}

.tablenm-sm th,
.tablenm-sm td {
  padding: 0.3rem;
}

.tablenm-bordered {
  border: 1px solid #e3e6f0;
}

.tablenm-bordered th,
.tablenm-bordered td {
  border-top: none;
  border-bottom: 1px solid #e3e6f0;
  border-right: 1px solid #e3e6f0;
}

.tablenm-bordered thead th,
.tablenm-bordered thead td {
  border-bottom-width: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 525px;">
<table class="tablenm tablenm-bordered">
    <thead>
      <tr class="text-center first" style=" font-size: 12px;color: #555;">
        <th colspan="5" ><strong>5 GALONES (U)</strong></th>
        <th colspan="4" ><strong>5 GALONES ($)</strong></th>
        <th colspan="4" ><strong>NO RETORNABLE</strong></th>
        <th colspan="4" ><strong>TOTAL</strong></th>
      </tr>
     <tr class="align-middle text-center second" style=" font-size: 12px;color: #555;">
      <th><strong>SUPERVISOR</strong></th>
      <th><strong>META</strong></th>
      <th><strong>VENTA</strong></th>
      <th><strong>PY</strong></th>
      <th><strong>ALC</strong></th>
      <th><strong>META</strong></th>
      <th><strong>VENTA</strong></th>
      <th><strong>PY</strong></th>
      <th><strong>ALC</strong></th>
      <th><strong>META</strong></th>
      <th><strong>VENTA</strong></th>
      <th><strong>PY</strong></th>
      <th><strong>ALC</strong></th>
      <th><strong>META</strong></th>
      <th><strong>VENTA</strong></th>
      <th><strong>PY</strong></th>
      <th><strong>ALC</strong></th></tr>
    </thead>
    <tbody>
<tr>
<th>NOMBRE 1</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 2</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 3</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr><tr>
<th>NOMBRE 4</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 5</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 6</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 7</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 8</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 9</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 10</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
<tr>
<th>NOMBRE 11</th>
<td>2,700</td>
<td>651</td>
<td>2,116</td>
<td>78.4%</td>
<td>$3,306</td>
<td>$791</td>
<td>$2,572</td>
<td>77.8%</td>
<td>$200</td>
<td>$204</td>
<td>$662</td>
<td>330.8%</td>
<td>$3,506</td>
<td>$995</td>
<td>$3,234</td>
<td>92.2%</td></tr>
</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.