[SOLUCIONADO] Tabla en scroll

[MaNuX0218]

Tengo unas tabla con css y cuando hay contenido le asigno un alto para que cuando lo sobrepase cree un scroll para subir y bajar y no se expanda el contenido, pero el problema es que no se me ajusta el thead con el tbody, me sale de la siguiente manera:

ID Nombre Sección
5 Pepito Mi sección


Y nose como ajustar para que quede como devería:

ID Nombre Sección
5 Pepito Mi sección


Bueno aqui dejo el código css para haber si pueden ayudarme a arreglarlo.

Código CSS:

table thead {
    display:table;
    width:100%;
}
 
table thead tr {
    display: table-row;
}
 
table thead tr th {
    background:#333;
    color:#fff;
    padding:5px;
    text-align:left;
}
 
table tr.none {
    display: inline-block;
    text-align:center;
    background:none;
    padding-top:20px;
    border:none;
}
 
table tr.none:hover {
    background:none;
    cursor:default;
    width:100%;
}
 
table tr.none td {
    border:none;
    text-align:center;
}
 
table tbody {
    display:inline-block;
    width:100%;
    overflow:auto;
    height:450px;
}
 
table tbody tr {
    width: 100%;
    border-bottom:1px solid #eee;
}
 
table tbody tr:hover {
    background:#eee;
    cursor:pointer;
}
 

Saludos.

[juangemelo01]

agrega un ancho definido o proporcional en

Código:

table thead tr th {
    background:#333;
    color:#fff;
    padding:5px;
    text-align:left;
}

tambien tienes que crear un estilo para

Código:

table tbody tr td {
width:
}

le asignas el ancho y con eso te debe dar resultado ;)

[MaNuX0218]

Iniciado por juangemelo01

agrega un ancho definido o proporcional en

Código:

table thead tr th {
    background:#333;
    color:#fff;
    padding:5px;
    text-align:left;
}

tambien tienes que crear un estilo para

Código:

table tbody tr td {
width:
}

le asignas el ancho y con eso te debe dar resultado ;)

Ya lo e intentado como comentas y se ajusta algo pero no del todo, lo e solucionado cambiando el display y se me ajusta perfectamente con display:inline-table, pero no me muestra el scroll. El scroll me lo muestra con display:inline-block, pero se me desajusta la tabla.

Código CSS:

table tbody {
    display:inline-table;
    width:100%;
    overflow:auto;
    height:450px;
}
 

Saludos.

[MaNuX0218]

Nada solo consigo que se ajuste pero sin scroll y necesito que tenga scroll :(

[juangemelo01]

disculpa, habia entendido que lo que querias que tuviera scroll era alguna celda, revisa este ejemplo, es un scroll en el tbody y el thead estan juntos
http://codepen.io/elestudiantefantasma/pen/btjpK

basicamente es tu codigo css pero modificado un poco, lo que esta en gris son comentarios, parte del codigo la deje asi cuando veia que no influia realmente con el resultado

[MaNuX0218]

Gracias pero ya lo habia solucionado, la solución era jugar con el width. Solo que el problema que cuando aparece el scroll se me espande hacia la izquierda pero muy poquito que casi se nota, por lo que lo dejaré así.

Pero gracias por la ayuda.

Saludos.