Почему не работает css scroll в таблице?

Question

[P0f1g1st112]

На фронтенде есть таблица с записями, в перспективе их будет очень много, нужно сделать скролл для удобства.
Вроде все по инструкции сделал, а оно вон никак ((
https://jsfiddle.net/j5pbxhe3/

Comments

[Антон Вебсайтовский]

Вам что надо, чтобы скрол работал внутри блока как бы?

Answer 1

[Alexey]

/* This is what we are focused on */
.table{
    overflow-y: scroll;
    height: 300px;
}

.table th{
    position: sticky;
    top: 0;
}

table{
    border-collapse: collapse;
    width: 100%;
}

Answer 2

[Nikita Undefined]

Или просто добавить в table - display: block;

В итоге будет вот так

table{
  display: block;
	text-align: center;
	width:100%;
	height: 300px;
	table-layout: fixed;
	overflow-x: hidden;
  overflow-y: auto;
	border-spacing: 0px;
}

Comments

[P0f1g1st112]

но в таком случае она сжимается и по ширине занимает меньше половины экрана

[Nikita Undefined]

P0f1g1st112, Ок, тогда давайте сделаем вот так:

.table {
	height: 300px;
	overflow-y: scroll;
}
table{
	text-align: center;
	width:100%;
	table-layout: fixed;
	border-spacing: 0px;
}
.table th{
    position: sticky;
    top: 0;
}

Так лучше?)

Answer 3

[Владислав Черненко]

Возможно костыль, но работает)

table{
   display:block;
   max-height:300px;
}
th,td{
   width:100%;
   white-space:nowrap;
}

Answer 4

[Антон Вебсайтовский]

На вот, внутри блока скрол: просто добавим новый класс и все. )
https://jsfiddle.net/1cf0pza2/2/