Как прокрутить таблицу по горизонтали с Nowrap на элементах <th>, не перетекая в следующий столбец?

Question

Я работаю над созданием таблицы данных, которая обеспечивает горизонтальную прокрутку всей таблицы, а также позволяет вертикальную прокрутку только <tbody>.Мне нужны данные в тегах <td> для переноса, но я не хочу переносить текст в элементах <th>.

Моя проблема в том, что я не могу заставить горизонтальную полосу прокрутки работать на самом деле - мои теги <th> кажутся отзывчивыми и уменьшаются вместе с шириной экрана, поэтому мое "пробел":nowrap "на элементах <th> приводит к тому, что данные выливаются в столбец рядом с ним.

Я пробовал несколько разных попыток, чтобы это сработало, но безуспешно.Я прилагаю jsfiddle с примером того, что я сейчас пытаюсь:

https://jsfiddle.net/vd0wkf47/

При горизонтальном сжатии браузера я хочу, чтобы элементы <th> перестали уменьшаться после егодостигает ширины текста.Именно тогда горизонтальная полоса прокрутки должна сработать для всей таблицы.

Answer 1

Установите ширину элементов th и установите overflow на auto:

th {
  white-space: nowrap;
  width: calc(50% - .5em);           /* half of your thead width */
  display: inline-block;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

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

table, th, td {
  border: 1px solid black;
}


thead, tr {
  display:table; 
  width:100%; 
  table-layout:fixed;
}

thead {
  width: calc( 100% - 1em );
}

th {
  white-space: nowrap;
  width: calc(50% - .5em);
  display: inline-block;
  overflow: auto;
}

tbody {
  max-height:100px; 
  display:block; 
  overflow-y: scroll;
  overflow-x: hidden; 
}

td {
  overflow-wrap:
}

.table-wrapper {
  overflow-x: scroll; 
  overflow-y: hidden;
}

    <div class="table-wrapper">
      <table>
        <thead>
          <th>A Long Long Long Header A Long Long Long Header</th>
          <th>Second Header</th>
        </thead>

        <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
         </tr>
         <tr>
            <td>Long Long Longggggggggg Data</td>
            <td>Data 2</td>
         </tr>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
         </tr>
                  <tr>
            <td>Data 1</td>
            <td>Data 2</td>
         </tr>
         <tr>
            <td>Long Long Longggggggggg Data</td>
            <td>Data 2</td>
         </tr>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
         </tr>
        </tbody>
      </table>
    </div>

https://jsfiddle.net/u5fpc160/1/