如何在启用 nowrap 的情况下水平滚动表格<th>元素不会溢出到下一列？

Question

I'm working to create a data table that allows for horizontal scrolling of the entire table, while also allowing vertical scrolling of only the <tbody> . I need the data in the <td> tags to wrap, but I do not want wrapping on the text in the <th> elements.

My problem is that I can't seem to get the horizontal scrollbar to actually work - my <th> tags seem to be responsive and shrink along with the width of the screen, so my "white-space: nowrap" on the <th> elements causes the data to spill out into the column beside it.

I've tried a number of different attempts to get this working with no luck. I'm attaching a jsfiddle with an example of what I'm currently trying:

https://jsfiddle.net/vd0wkf47/

When horizontally shrinking the browser, I want the <th> elements to stop shrinking once it reaches the text width. That's when the horizontal scrollbar should kick in for the entire table.

Answer 1

Set a width on the th elements and set overflow to 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/