html - attribute - tabla con scroll vertical




Cómo establecer la altura del cuerpo con desplazamiento de desbordamiento (5)

Cambie su segundo código de tabla como a continuación.

<table style="border: 1px solid red;width:300px;display:block;">
<thead>
    <tr>
        <td width=150>Name</td>
        <td width=150>phone</td>
    </tr>
</thead>
<tbody style='height:50px;overflow:auto;display:block;width:317px;'>
    <tr>
        <td width=150>AAAA</td>
        <td width=150>323232</td>
    </tr>
    <tr>
        <td>BBBBB</td>
        <td>323232</td>
    </tr>
    <tr>
        <td>CCCCC</td>
        <td>3435656</td>
    </tr>
</tbody>
</table>

DEMO JSFIDDLE

Estoy enfrentando un problema al configurar el rollo de desbordamiento de ancho de altura tbody.

<style> 
     tbody{
       height:50px;display:block;overflow:scroll
     }
   </style>

       <h3>Table B</h3>
    <table style="border: 1px solid red;width:300px;display:block">
        <thead>
            <tr>
                <td>Name</td>
                <td>phone</td>
            </tr>
        </thead>
        <tbody style='height:50px;display:block;overflow:scroll'>
            <tr>
                <td>AAAA</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>BBBBB</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>CCCCC</td>
                <td>3435656</td>
            </tr>
        </tbody>
    </table>

Visita mi violín aquí

Quiero que la tabla B se parezca a la Tabla A con desplazamiento de desbordamiento.

Cualquier ayuda será apreciada.

Muchas gracias, M.


En mi caso, quería tener la altura de la tabla receptiva en lugar de la altura fija en píxeles a medida que se muestran las otras respuestas. Para hacer eso, utilicé el porcentaje de propiedad de altura visible y el desbordamiento en div que contenía la tabla:

&__table-container {
  height: 70vh;
  overflow: scroll;
}

De esta forma, la tabla se expandirá junto con la ventana que se cambia de tamaño.


Por defecto, el overflow no se aplica a los elementos del grupo de tabla a menos que proporcione una display:block a <tbody> también debe dar una position:relative y display: block a <thead> . Verifica la DEMO .

.fixed {
  width:350px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed th {
  text-decoration: underline;
}
.fixed th,
.fixed td {
  padding: 5px;
  text-align: left;
  min-width: 200px;
}


.fixed thead {
  background-color: red;
  color: #fdfdfd;
}
.fixed thead tr {
  display: block;
  position: relative;
}
.fixed tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100px;
  overflow-y: scroll;
    overflow-x: hidden;
}

Supongo que lo que intentas hacer es mantener el encabezado fijo y desplazar el contenido del cuerpo. Puede desplazar el contenido en 2 direcciones:

  • horizontalmente: no podrá desplazar el contenido horizontalmente a menos que use un control deslizante (un control deslizante de jQuery, por ejemplo). Yo recomendaría evitar usar una tabla en este caso.
  • verticalmente: no podrá lograr eso con una etiqueta tbody , porque la asignación de display:block o display:inline-block romperá el diseño de la tabla.

Aquí hay una solución que usa divs : JSFiddle

HTML:

<div class="wrap_header">
    <div class="column">
        Name
    </div>
    <div class="column">
        Phone
    </div>
    <div class="clearfix"></div>
</div>
<div class="wrap_body">
    <div class="sliding_wrapper">
        <div class="serie">
            <div class="cell">
                AAAAAA
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                BBBBBB
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                CCCCCC
            </div>
            <div class="cell">
                3435656
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

CSS:

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
.sliding_wrapper {overflow-y:scroll; overflow-x:none;}
.sliding_wrapper,
.wrap_body {height:45px;}
.wrap_header,
.wrap_body {overflow:hidden;}
.column {width:100px; float:left; border:1px solid red;}
.cell {width:100px; float:left; border:1px solid red;}

/**
 * @info Clearfix: clear all the floated elements
 */
.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clearfix {display:inline-table;}

/**
 * @hack Display the Clearfix as a block element
 * @hackfor Every browser except IE for Macintosh
 */
    /* Hides from IE-mac \*/
    * html .clearfix {height:1%;}
    .clearfix {display:block;}
    /* End hide from IE-mac */

Explicación:

Tienes una sliding wrapper que contendrá todos los datos.

Tenga en cuenta lo siguiente:

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}

Hay una diferencia de 17 px porque debemos tener en cuenta el ancho de la barra de desplazamiento.


si quiere que tbody muestre un pergamino, conviértalo en un block .

Para mantener el comportamiento de la table , convierta tr en la table .

para rociar uniformemente las celdas, use table-layout:fixed;

DEMO

CSS para su prueba de HTML:

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:50px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}

Si tbody no muestra un desplazamiento, porque el contenido es menor que la height o la height max-height , configure el desplazamiento en cualquier momento con: overflow-y:scroll; . DEMO 2





css