HTML Table scroll for tbody

Question

Имею следующую структуру таблицы:

<body>
    <div style="height: 350px">
        <table id="lazy_table" width=100% class="ui_row">
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                </tr>
            </tbody>
        </table>

    </div>
</body>

за основу подключаю следующий стиль,

.ui_row tbody {
  display: block;
  height: 100%;
  overflow: auto;
  border-spacing: 0px;
}

.ui_row thead, table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.ui_row td 
{
    text-align: center;
    border-top: 1px solid grey;
}

основная идея в том, что, пытаюсь построить таблицу с прокручиваемой областью в tbody, сталкиваюсь с тем, что, при данной конструкции при выставление ширины 100% накладывается скрол по оси Х и добавляется не задейственное пространство с правой стороны, Просьба, подсказать, как корректно добиться скролинга в области tbody с корректным заполнением по ширине

БЛОГ НА HUSL

HTML Table scroll for tbody

Ответы (0 шт):