con fijo y desplazable [duplicate]

30 minutos de lectura

con fijo y desplazable duplicate
Dmitri Stril

He revisado las preguntas aquí y los artículos en Internet, pero aún no he encontrado una solución que satisfaga mis requisitos. Así que ahora en 2017, ¿hay alguna forma elegante de tener una <table> eso podría:

  1. estar escrito en html+css (no js)
  2. tener encabezado fijo (no desplazable, no pegajoso)
  3. tener desplazable <tbody> (la barra de desplazamiento puede estar siempre visible)
  4. el encabezado y el cuerpo manejarían el cambio de tamaño correctamente y no desordenarían la alineación del <thead> columnas y el <tbody> columnas
  5. no usaría tablas anidadas o tablas separadas para el encabezado

1642904586 367 con fijo y desplazable duplicate
VXp

Esta solución cumple los 5 requisitos:

table {
  width: 100%;
}

table, td {
  border-collapse: collapse;
  border: 1px solid #000;
}

thead {
  display: table; /* to take the same width as tr */
  width: calc(100% - 17px); /* - 17px because of the scrollbar width */
}

tbody {
  display: block; /* to enable vertical scrolling */
  max-height: 200px; /* e.g. */
  overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}

th, td {
  width: 33.33%; /* to enable "word-break: break-all" */
  padding: 5px;
  word-break: break-all; /* 4. */
}

tr {
  display: table; /* display purpose; th's border */
  width: 100%;
  box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */
}

td {
  text-align: center;
  border-bottom: none;
  border-left: none;
}
<table> 
  <thead> 
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>Data1111111111111111111111111</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data2222222222222222222222222</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data3333333333333333333333333</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

  • Esto no es apropiado. si pones el auto en vez de scroll entonces tu tbody variará y no se alineará correctamente si eliminamos la mitad del contenido del cuerpo.

    – Akshay Uttur

    21 dic. 2020 a las 08:16

con fijo y desplazable duplicate
Roko C. Bulján

cromo, FF, borde

la solución más simple es usar th { position: sticky; top: 0; }

/* JUST COMMON TABLE STYLES... */
table { border-collapse: collapse; width: 100%; }
th, td { background: #fff; padding: 8px 16px; }


.tableFixHead {
  overflow: auto;
  height: 100px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
}
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

IE11

Para admitir descuidadamente IE11 (2,5% de cuota de mercado a partir del 10/2018), un poco irregular pero al menos THs están en la parte superior; puede agregar este JavaScript:

function isIE() {
  return navigator.userAgent.indexOf('MSIE') > -1 || navigator.appVersion.indexOf('Trident/') > -1
}


if (isIE()) {

  // Fix table head
  function tableFixHead(ths) {
    var sT = this.scrollTop;
    [].forEach.call(ths, function(th) {
      th.style.transform = "translateY(" + sT + "px)";
    });
  }

  [].forEach.call(document.querySelectorAll(".tableFixHead"), function(el) {
    var ths = el.querySelectorAll("thead th");
    el.addEventListener("scroll", tableFixHead.bind(el, ths));
  });

}

que lo hará (ya que IE ignora sticky posición) uso transform translateY para colocar los elementos TH.

PD: el JS anterior (sin el envoltorio if declaración) funciona bastante decentemente para todos los demás navegadores perennes también, en caso de que position: sticky; no se ajusta a tus necesidades…

  • Esta solución con translateY tiene algunos problemas con z-index. cuando estas usando translateY está creando un nuevo contexto a partir de la tabla misma. Puede leer más aquí: stackoverflow.com/a/25798522. ¡Gracias de todos modos! 🙂

    –Tomeu Cabot

    25 ene.


  • @Tomeu Lo sé. ¿Puedes compartir en qué contexto No funciona ¿para ti? ¿Estás usando el índice z para…? ¿Y sobre qué elementos?

    – Roko C. Bulján

    25 ene.


  • tengo un problema con th en el thead en la mesa. tengo una mesa con tapa caption, Quiero mi caption y th ser pegajoso cuando se desplaza la tabla. he dado th top: 46px cual es la altura de caption. Funciona en cromo pero no en safari. En safari, los `th` se desplazan unos pocos píxeles hacia abajo al cargar la página. Si yo doy top: 0 a th funciona en safari pero luego en scroll en chrome el th se superpone caption.

    – Sushmit Sagar

    28 nov.


1642904586 536 con fijo y desplazable duplicate
Rashami Ranjan Biswal

.table-sticky>thead>tr>th,
.table-sticky>thead>tr>td {
	background: #009688;
	color: #fff;
	top: 0px;
	position: sticky;
}
.table-height {
	height: 320px;
	display: block;
	overflow: scroll;
	width: 100%;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td {
	border: 1px solid #ddd;
}
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <title>Fixed Table Header</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
   </head>
   <body>
      <div id="container">
         <div class="table-responsive table-height">
            <table class="table table-bordered table-striped table-hover table-sticky">
               <thead style="background:#1e91cf;color:#fff">
                  <tr>
                     <th class="text-center" rowspan="2"> Product</th>
                     <th class="text-center" colspan="2"> Sellable</th>
                     <th class="text-center" colspan="2"> Unsellable</th>
                     <th class="text-center" colspan="2"> Total</th>
                     <th class="text-center" colspan="6">2018-July</th>
                     <th class="text-center" colspan="6">2018-June</th>
                     <th class="text-center" colspan="6">2018-May</th>
                     <th class="text-center" colspan="6">2018-April</th>
                  </tr>
                  <tr>
                     <th class="text-center" style="top: 23px;"> Units</th>
                     <th class="text-center" style="top: 23px;"> Amount</th>
                     <th class="text-center" style="top: 23px;"> Units</th>
                     <th class="text-center" style="top: 23px;"> Amount</th>
                     <th class="text-center" style="top: 23px;"> Units</th>
                     <th class="text-center" style="top: 23px;"> Amount</th>
                     <th class="text-center" style="top: 23px;">SU</th>
                     <th class="text-center" style="top: 23px;">SA</th>
                     <th class="text-center" style="top: 23px;">UU</th>
                     <th class="text-center" style="top: 23px;">UA</th>
                     <th class="text-center" style="top: 23px;">TU</th>
                     <th class="text-center" style="top: 23px;">TA</th>
                     <th class="text-center" style="top: 23px;">SU</th>
                     <th class="text-center" style="top: 23px;">SA</th>
                     <th class="text-center" style="top: 23px;">UU</th>
                     <th class="text-center" style="top: 23px;">UA</th>
                     <th class="text-center" style="top: 23px;">TU</th>
                     <th class="text-center" style="top: 23px;">TA</th>
                     <th class="text-center" style="top: 23px;">SU</th>
                     <th class="text-center" style="top: 23px;">SA</th>
                     <th class="text-center" style="top: 23px;">UU</th>
                     <th class="text-center" style="top: 23px;">UA</th>
                     <th class="text-center" style="top: 23px;">TU</th>
                     <th class="text-center" style="top: 23px;">TA</th>
                     <th class="text-center" style="top: 23px;">SU</th>
                     <th class="text-center" style="top: 23px;">SA</th>
                     <th class="text-center" style="top: 23px;">UU</th>
                     <th class="text-center" style="top: 23px;">UA</th>
                     <th class="text-center" style="top: 23px;">TU</th>
                     <th class="text-center" style="top: 23px;">TA</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td class="text-left">INFOCUS-TURBO5-GG-16GB-D</td>
                     <td class="text-left">1244</td>
                     <td class="text-left">75,12,756</td>
                     <td class="text-left">173</td>
                     <td class="text-left">10,50,827</td>
                     <td class="text-left">1417</td>
                     <td class="text-left">85,63,583</td>
                     <td class="text-left">11</td>
                     <td class="text-left">65,989</td>
                     <td class="text-left">3</td>
                     <td class="text-left">18,497</td>
                     <td class="text-left">14</td>
                     <td class="text-left">84,486</td>
                     <td class="text-left">112</td>
                     <td class="text-left">6,71,888</td>
                     <td class="text-left">17</td>
                     <td class="text-left">1,01,983</td>
                     <td class="text-left">129</td>
                     <td class="text-left">7,73,871</td>
                     <td class="text-left">649</td>
                     <td class="text-left">38,93,351</td>
                     <td class="text-left">85</td>
                     <td class="text-left">5,10,415</td>
                     <td class="text-left">734</td>
                     <td class="text-left">44,03,766</td>
                     <td class="text-left">472</td>
                     <td class="text-left">28,81,528</td>
                     <td class="text-left">68</td>
                     <td class="text-left">4,19,932</td>
                     <td class="text-left">540</td>
                     <td class="text-left">33,01,460</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-TURBO5-GG-32GB-D</td>
                     <td class="text-left">2140</td>
                     <td class="text-left">1,50,25,360</td>
                     <td class="text-left">453</td>
                     <td class="text-left">31,98,547</td>
                     <td class="text-left">2593</td>
                     <td class="text-left">1,82,23,907</td>
                     <td class="text-left">222</td>
                     <td class="text-left">15,53,778</td>
                     <td class="text-left">41</td>
                     <td class="text-left">2,86,959</td>
                     <td class="text-left">263</td>
                     <td class="text-left">18,40,737</td>
                     <td class="text-left">558</td>
                     <td class="text-left">39,05,442</td>
                     <td class="text-left">113</td>
                     <td class="text-left">7,90,887</td>
                     <td class="text-left">671</td>
                     <td class="text-left">46,96,329</td>
                     <td class="text-left">798</td>
                     <td class="text-left">55,85,202</td>
                     <td class="text-left">168</td>
                     <td class="text-left">11,78,332</td>
                     <td class="text-left">966</td>
                     <td class="text-left">67,63,534</td>
                     <td class="text-left">562</td>
                     <td class="text-left">39,80,938</td>
                     <td class="text-left">131</td>
                     <td class="text-left">9,42,369</td>
                     <td class="text-left">693</td>
                     <td class="text-left">49,23,307</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-TURBO5-MG-16GB-DAR</td>
                     <td class="text-left">371</td>
                     <td class="text-left">22,25,629</td>
                     <td class="text-left">45</td>
                     <td class="text-left">2,69,955</td>
                     <td class="text-left">416</td>
                     <td class="text-left">24,95,584</td>
                     <td class="text-left">39</td>
                     <td class="text-left">2,33,961</td>
                     <td class="text-left">9</td>
                     <td class="text-left">53,991</td>
                     <td class="text-left">48</td>
                     <td class="text-left">2,87,952</td>
                     <td class="text-left">294</td>
                     <td class="text-left">17,63,706</td>
                     <td class="text-left">32</td>
                     <td class="text-left">1,91,968</td>
                     <td class="text-left">326</td>
                     <td class="text-left">19,55,674</td>
                     <td class="text-left">38</td>
                     <td class="text-left">2,27,962</td>
                     <td class="text-left">4</td>
                     <td class="text-left">23,996</td>
                     <td class="text-left">42</td>
                     <td class="text-left">2,51,958</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-TURBO5-MG-32GB-D</td>
                     <td class="text-left">6</td>
                     <td class="text-left">44,994</td>
                     <td class="text-left">3</td>
                     <td class="text-left">22,497</td>
                     <td class="text-left">9</td>
                     <td class="text-left">67,491</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">0</td>
                     <td class="text-left">0</td>
                     <td class="text-left">1</td>
                     <td class="text-left">7,499</td>
                     <td class="text-left">1</td>
                     <td class="text-left">7,499</td>
                     <td class="text-left">3</td>
                     <td class="text-left">22,497</td>
                     <td class="text-left">1</td>
                     <td class="text-left">7,499</td>
                     <td class="text-left">4</td>
                     <td class="text-left">29,996</td>
                     <td class="text-left">3</td>
                     <td class="text-left">22,497</td>
                     <td class="text-left">1</td>
                     <td class="text-left">7,499</td>
                     <td class="text-left">4</td>
                     <td class="text-left">29,996</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-TURBO5-RG-32GB-D</td>
                     <td class="text-left">1459</td>
                     <td class="text-left">1,09,84,041</td>
                     <td class="text-left">335</td>
                     <td class="text-left">25,23,665</td>
                     <td class="text-left">1794</td>
                     <td class="text-left">1,35,07,706</td>
                     <td class="text-left">141</td>
                     <td class="text-left">10,57,359</td>
                     <td class="text-left">40</td>
                     <td class="text-left">2,99,960</td>
                     <td class="text-left">181</td>
                     <td class="text-left">13,57,319</td>
                     <td class="text-left">558</td>
                     <td class="text-left">41,84,442</td>
                     <td class="text-left">116</td>
                     <td class="text-left">8,69,884</td>
                     <td class="text-left">674</td>
                     <td class="text-left">50,54,326</td>
                     <td class="text-left">369</td>
                     <td class="text-left">27,67,131</td>
                     <td class="text-left">101</td>
                     <td class="text-left">7,57,399</td>
                     <td class="text-left">470</td>
                     <td class="text-left">35,24,530</td>
                     <td class="text-left">391</td>
                     <td class="text-left">29,75,109</td>
                     <td class="text-left">78</td>
                     <td class="text-left">5,96,422</td>
                     <td class="text-left">469</td>
                     <td class="text-left">35,71,531</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-TURBO5PLUS-MB-32GB-D</td>
                     <td class="text-left">5</td>
                     <td class="text-left">39,995</td>
                     <td class="text-left">4</td>
                     <td class="text-left">31,996</td>
                     <td class="text-left">9</td>
                     <td class="text-left">71,991</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">5</td>
                     <td class="text-left">39,995</td>
                     <td class="text-left">4</td>
                     <td class="text-left">31,996</td>
                     <td class="text-left">9</td>
                     <td class="text-left">71,991</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-VISION3-16GB-D</td>
                     <td class="text-left">4005</td>
                     <td class="text-left">2,80,30,995</td>
                     <td class="text-left">618</td>
                     <td class="text-left">43,25,382</td>
                     <td class="text-left">4623</td>
                     <td class="text-left">3,23,56,377</td>
                     <td class="text-left">28</td>
                     <td class="text-left">1,95,972</td>
                     <td class="text-left">8</td>
                     <td class="text-left">55,992</td>
                     <td class="text-left">36</td>
                     <td class="text-left">2,51,964</td>
                     <td class="text-left">234</td>
                     <td class="text-left">16,37,766</td>
                     <td class="text-left">44</td>
                     <td class="text-left">3,07,956</td>
                     <td class="text-left">278</td>
                     <td class="text-left">19,45,722</td>
                     <td class="text-left">1727</td>
                     <td class="text-left">1,20,87,273</td>
                     <td class="text-left">241</td>
                     <td class="text-left">16,86,759</td>
                     <td class="text-left">1968</td>
                     <td class="text-left">1,37,74,032</td>
                     <td class="text-left">2016</td>
                     <td class="text-left">1,41,09,984</td>
                     <td class="text-left">325</td>
                     <td class="text-left">22,74,675</td>
                     <td class="text-left">2341</td>
                     <td class="text-left">1,63,84,659</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-VISION3-BL-16GB-D</td>
                     <td class="text-left">9344</td>
                     <td class="text-left">6,53,98,656</td>
                     <td class="text-left">1161</td>
                     <td class="text-left">81,25,839</td>
                     <td class="text-left">10505</td>
                     <td class="text-left">7,35,24,495</td>
                     <td class="text-left">301</td>
                     <td class="text-left">21,06,699</td>
                     <td class="text-left">60</td>
                     <td class="text-left">4,19,940</td>
                     <td class="text-left">361</td>
                     <td class="text-left">25,26,639</td>
                     <td class="text-left">2339</td>
                     <td class="text-left">1,63,70,661</td>
                     <td class="text-left">304</td>
                     <td class="text-left">21,27,696</td>
                     <td class="text-left">2643</td>
                     <td class="text-left">1,84,98,357</td>
                     <td class="text-left">3745</td>
                     <td class="text-left">2,62,11,255</td>
                     <td class="text-left">440</td>
                     <td class="text-left">30,79,560</td>
                     <td class="text-left">4185</td>
                     <td class="text-left">2,92,90,815</td>
                     <td class="text-left">2959</td>
                     <td class="text-left">2,07,10,041</td>
                     <td class="text-left">357</td>
                     <td class="text-left">24,98,643</td>
                     <td class="text-left">3316</td>
                     <td class="text-left">2,32,08,684</td>
                  </tr>
                  <tr>
                     <td class="text-left">INFOCUS-VISION3PRO-MNB-</td>
                     <td class="text-left">620</td>
                     <td class="text-left">68,19,380</td>
                     <td class="text-left">104</td>
                     <td class="text-left">11,43,896</td>
                     <td class="text-left">724</td>
                     <td class="text-left">79,63,276</td>
                     <td class="text-left">47</td>
                     <td class="text-left">5,16,953</td>
                     <td class="text-left">13</td>
                     <td class="text-left">1,42,987</td>
                     <td class="text-left">60</td>
                     <td class="text-left">6,59,940</td>
                     <td class="text-left">198</td>
                     <td class="text-left">21,77,802</td>
                     <td class="text-left">46</td>
                     <td class="text-left">5,05,954</td>
                     <td class="text-left">244</td>
                     <td class="text-left">26,83,756</td>
                     <td class="text-left">344</td>
                     <td class="text-left">37,83,656</td>
                     <td class="text-left">45</td>
                     <td class="text-left">4,94,955</td>
                     <td class="text-left">389</td>
                     <td class="text-left">42,78,611</td>
                     <td class="text-left">31</td>
                     <td class="text-left">3,40,969</td>
                     <td class="text-left">0</td>
                     <td class="text-left">0</td>
                     <td class="text-left">31</td>
                     <td class="text-left">3,40,969</td>
                  </tr>
                  <tr>
                     <td class="text-left">MOTO-G5-FG-16GB</td>
                     <td class="text-left">52</td>
                     <td class="text-left">4,27,812</td>
                     <td class="text-left">28</td>
                     <td class="text-left">2,36,063</td>
                     <td class="text-left">80</td>
                     <td class="text-left">6,63,875</td>
                     <td class="text-left">0</td>
                     <td class="text-left">0</td>
                     <td class="text-left">1</td>
                     <td class="text-left">8,985</td>
                     <td class="text-left">1</td>
                     <td class="text-left">8,985</td>
                     <td class="text-left">0</td>
                     <td class="text-left">0</td>
                     <td class="text-left">1</td>
                     <td class="text-left">8,229</td>
                     <td class="text-left">1</td>
                     <td class="text-left">8,229</td>
                     <td class="text-left">14</td>
                     <td class="text-left">1,15,465</td>
                     <td class="text-left">8</td>
                     <td class="text-left">68,675</td>
                     <td class="text-left">22</td>
                     <td class="text-left">1,84,140</td>
                     <td class="text-left">38</td>
                     <td class="text-left">3,12,347</td>
                     <td class="text-left">18</td>
                     <td class="text-left">1,50,174</td>
                     <td class="text-left">56</td>
                     <td class="text-left">4,62,521</td>
                  </tr>                
                  <tr>
                     <td class="text-left">MOTO-GPLUS4-BL-16GB</td>
                     <td class="text-left">0</td>
                     <td class="text-left">0</td>
                     <td class="text-left">1</td>
                     <td class="text-left">10,499</td>
                     <td class="text-left">1</td>
                     <td class="text-left">10,499</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">0</td>
                     <td class="text-left">0</td>
                     <td class="text-left">1</td>
                     <td class="text-left">10,499</td>
                     <td class="text-left">1</td>
                     <td class="text-left">10,499</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                     <td class="text-left">Data Not Available</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </body>
</html>

  • OP no mencionó sticky, debería leer mejor el requisito y al menos explicar qué está tratando de mostrar OP?

    – Toan Lu

    16 ago. 18 en 15:58

¿Qué tal esto?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
table {
    max-width:980px;
    table-layout:fixed;
    margin:auto;
}
th, td {
    padding:5px 10px;
    border:1px solid #000;
}
thead, tfoot {
    background:#f9f9f9;
    display:table;
    width:100%;
    width:calc(100% - 18px);
}
tbody {
    height:300px;
    overflow:auto;
    overflow-x:hidden;
    display:block;
    width:100%;
}
tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th scope="col">Header 1                    </th>
                <th scope="col">Header 2                    </th>
                <th scope="col">Header 3                    </th>
                <th scope="col">Header 4                    </th>
            </tr>
        </thead>
    <tbody>
    <tr>
        <td>Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    </tbody>
    <tfoot>
        <tr>
        <td>Footer 1        </td>
        <td>Footer 2        </td>
        <td>Footer 3        </td>
        <td>Footer 4        </td>
        </tr>
    </tfoot>
    </table>
</body>
</html>

He creado un violín a continuación

https://jsfiddle.net/jchaplin2/dt829611/1/

1642904587 396 con fijo y desplazable duplicate
maldadReiko

Respuesta corta: No, no es posible.

La respuesta de VXp es interesante pero no funciona como cabría esperar. Tiene 2 problemas:

  1. El ancho de la tabla debe establecerse en un ancho fijo específico, no puede tener un ancho dinámico con esta solución. Es por eso que estableció el ancho de la tabla en 600 px.
  2. Si alguna celda tiene texto largo, todo el diseño se romperá (columnas mal alineadas).

Lo mismo para la respuesta de Jon.

Desaconsejo el uso de un cabezal de mesa fijo, pero si De Verdad quiere hacer esto con el conjunto de reglas que enumeró (las 5 reglas que mencionó), la única solución es usar js/jQuery.

  • @DmitryStril Si está satisfecho con eso, hágalo. Pero es incorrecto incluso si parece válido. Puede obtener un diseño diferente en cada navegador porque el código no sigue los estándares. En una tabla adecuada, si cambia el ancho de una celda, toda la columna obtiene el mismo ancho, pero en su ejemplo, cada fila se comporta por separado. De todos modos, si va con esta solución, es posible que desee intentar agregar border-collapse: collapse; para usted <table> que te puede gustar el resultado

    – evilReiko

    11 dic. 17 a las 5:49


  • 1. La mesa es dinámica. 2. El diseño no se rompe. Respuesta corta: es posible.

    – VXp

    13 abr.

  • @DmitryStril Si está satisfecho con eso, hágalo. Pero es incorrecto incluso si parece válido. Puede obtener un diseño diferente en cada navegador porque el código no sigue los estándares. En una tabla adecuada, si cambia el ancho de una celda, toda la columna obtiene el mismo ancho, pero en su ejemplo, cada fila se comporta por separado. De todos modos, si va con esta solución, es posible que desee intentar agregar border-collapse: collapse; para usted <table> que te puede gustar el resultado

    – evilReiko

    11 dic. 17 a las 5:49


  • 1. La mesa es dinámica. 2. El diseño no se rompe. Respuesta corta: es posible.

    – VXp

    13 abr.

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad