Как добавить полосу прокрутки в таблицу с фиксированной строкой заголовка?

Question

В моей таблице слишком много столбцов, и она превышает 100% ширины страницы. Поэтому мне нужно добавить горизонтальную полосу прокрутки в таблицу.

Но мне также нужно исправить заголовок для вертикальной полосы прокрутки, когда слишком много строк для прокрутки.

Каков правильный способ чтобы выполнить sh это, используя CSS и HTML?

Первый код - CSS

table .titleFormat{
                text-align: center;
                width:170px;
                font-size:14px;
           }

Это HTML код

<div style="width: 400px;height:150px;overflow-x: auto;overflow-y: auto">
    <table id="example-basic" style="width: 100%;">

            <thead>
                <tr class="TitleHeader">
                    <th width="200px"><div class="titleFormat">A</div></th>
                    <th  width="100px"><div class="titleFormat">B</div></th>
                    <th width="100px"><div class="titleFormat">C</div></th>
                    <th width="100px"><div class="titleFormat">D</div></th>
                    <th width="100px"><div class="titleFormat">E</div></th>
                   </tr>
            </thead>
            <tbody>         
                <tr>
                    <td style=" text-align: left ">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                          1
                    </td>

                </tr> 
                <tr>
                    <td style=" text-align: left ">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                          1
                    </td>

                </tr>
                <tr>
                    <td style=" text-align: left ">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                          1
                    </td>

                </tr>
                <tr>
                    <td style=" text-align: left ">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                          1
                    </td>

                </tr>
                <tr>
                    <td style=" text-align: left ">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                          1
                    </td>

                </tr>
                <tr>
                    <td style=" text-align: left ">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                          1
                    </td>

                </tr>
                <tr>
                    <td style=" text-align: left ">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                            1
                    </td>
                    <td style=" text-align: center">
                          1
                    </td>

                </tr>

            </tbody>
    </table>
</div>

Answer 1

вы можете использовать position:Sticky Element на своем th и установить таблицу position:relative, и это будет делать работу.

проверьте ниже:

table .titleFormat {
  text-align: center;
  width: 170px;
  font-size: 14px;
}

#example-basic {
  position: relative;
}

#example-basic th {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  z-index: 100;
  background: green;
}

<div style="width: 400px;height:150px;overflow-x: auto;overflow-y: auto">
  <table id="example-basic" style="width: 100%;">

    <thead>
      <tr class="TitleHeader">
        <th width="200px">
          <div class="titleFormat">A</div>
        </th>
        <th width="100px">
          <div class="titleFormat">B</div>
        </th>
        <th width="100px">
          <div class="titleFormat">C</div>
        </th>
        <th width="100px">
          <div class="titleFormat">D</div>
        </th>
        <th width="100px">
          <div class="titleFormat">E</div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style=" text-align: left ">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>

      </tr>
      <tr>
        <td style=" text-align: left ">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>

      </tr>
      <tr>
        <td style=" text-align: left ">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>

      </tr>
      <tr>
        <td style=" text-align: left ">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>

      </tr>
      <tr>
        <td style=" text-align: left ">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>

      </tr>
      <tr>
        <td style=" text-align: left ">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>

      </tr>
      <tr>
        <td style=" text-align: left ">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>
        <td style=" text-align: center">
          1
        </td>

      </tr>

    </tbody>
  </table>
</div>

Answer 2

проверьте этот стиль, надеюсь, вам понравится

    table {
      text-align: left;
      position: relative;
      border-collapse: collapse; 
    }
    th, td {
      padding: 0.25rem;
    }
    tr th {
      background: red;
      color: white;
    }
    th {
      background: white;
      position: sticky;
      top: 0; /* Don't forget this, required for the stickiness */
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }