Как сделать скролл столбца таблицы, который содержит другие столбцы?

Question

Как сделать скролл столбца таблицы, который содержит другие столбцы? таблица занимает все пространство доступное по ширине, скролл внутри столбца позволит таблице полностью вместиться в div (внешний скролл по x не должен появляться). Как это реализовать?

до:

После:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
            min-width: 50px;
        }

        .scrollable {
            overflow-x: auto;
        }

        .fixed-width {
            width: 50px;
        }
    </style>
</head>
<body>
<div class="scrollable" style="width: 500px">
    <table>
        <thead>
        <tr>
            <th rowspan="2">Первый столбец</th>
            <th colspan="5">Второй столбец</th>
            <th colspan="5">Третий столбец</th>
        </tr>
        <tr>
            <th class="fixed-width">1</th>
            <th class="fixed-width">2</th>
            <th class="fixed-width">3</th>
            <th class="fixed-width">4</th>
            <th class="fixed-width">5</th>

            <th class="fixed-width">10</th>
            <th class="fixed-width">11</th>
            <th class="fixed-width">12</th>
            <th class="fixed-width">13</th>
            <th class="fixed-width">14</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Данные 1</td>

            <td>Данные 4</td>
            <td>Данные 5</td>
            <td>Данные 6</td>
            <td>Данные 7</td>
            <td>Данные 8</td>

            <td>Данные 4</td>
            <td>Данные 5</td>
            <td>Данные 6</td>
            <td>Данные 7</td>
            <td>Данные 8</td>

        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

Answer 1

::-webkit-scrollbar {
  width: 0;
}
.table1 {
  display: inline-block;
  table-layout: fixed;
    width: 65px;
    border-collapse:collapse;
    border-spacing:0;
    height: auto;
  white-space: wrap;
}
td {
    border: 1px solid #595959;
}
.table2 {
  display: inline-block;
  table-layout: fixed;
    width: 165px;
    border-collapse:collapse;
    border-spacing:0;
    height: auto;
  vertical-align: top;
  overflow-x: scroll;
  white-space: wrap;
}
.table3 {
  display: inline-block;
  table-layout: fixed;
    width: 165px;
    border-collapse:collapse;
    border-spacing:0;
    height: auto;
  vertical-align: top;
  overflow-x: scroll;
  white-space: wrap;
}
.p1 {
  padding-top: 4px;
}
div {
  width: 500px;
  position: relative;
  margin: auto;
}
.p2 {
  padding-top: 1px;
}

<div>
<table class="table1">
    <tbody>
        <tr>
            <td class="p1">Первый столбец</td>
        </tr>
        <tr>
            <td class="p2">Данные 1</td>
        </tr>
    </tbody>
</table><!--
--><table class="table2">
    <tbody>
        <tr>
            <td colspan="5">Второй столбец</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Данные 4</td>
            <td>Данные 5</td>
            <td>Данные 6</td>
            <td>Данные 7</td>
            <td>Данные 8</td>
        </tr>
    </tbody>
  </table><!--
--><table class="table3">
    <tbody>
        <tr>
            <td colspan="5">Второй столбец</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>Данные 4</td>
            <td>Данные 5</td>
            <td>Данные 6</td>
            <td>Данные 7</td>
            <td>Данные 8</td>
        </tr>
    </tbody>
</table>
</div>

Присутствует скрытый скролл второго и третьего столбцов. Если я правильно поняла Ваш запрос

Answer 2

вроде бы получилось то самое, но если нет, то необходимо переформулировать вопрос.

thead,
tbody {
  display: block;
}

tbody {
  width: 100px;
  overflow-x: auto;
}

<table>
  <thead>
    <tr>
      <th rowspan="2">Первый столбец</th>
      <th colspan="5">Второй столбец</th>
      <th colspan="5">Третий столбец</th>
    </tr>
    <tr>
      <th class="fixed-width">1</th>
      <th class="fixed-width">2</th>
      <th class="fixed-width">3</th>
      <th class="fixed-width">4</th>
      <th class="fixed-width">5</th>

      <th class="fixed-width">10</th>
      <th class="fixed-width">11</th>
      <th class="fixed-width">12</th>
      <th class="fixed-width">13</th>
      <th class="fixed-width">14</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Данные 1</td>

      <td>Данные 4</td>
      <td>Данные 5</td>
      <td>Данные 6</td>
      <td>Данные 7</td>
      <td>Данные 8</td>

      <td>Данные 4</td>
      <td>Данные 5</td>
      <td>Данные 6</td>
      <td>Данные 7</td>
      <td>Данные 8</td>

    </tr>
  </tbody>
</table>

БЛОГ НА HUSL

Как сделать скролл столбца таблицы, который содержит другие столбцы?

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