Make a table horizontal scrollable-CodePudding

I'm looking for a way to show a table with a horizontal scrollbar. I thought it was as simple as put a div around the table with the following properties:

.table-wrapper {
    overflow-x: scroll;
    width: 100%;
}

But unfortunately, this doesn't work. The table-wrapper goes offscreen: https://codepen.io/studiojw/pen/MWrXGdw

CodePudding user response：

Can you please check this

add an overflow-x: hidden; to .content

*, 
*::before,
*::after{
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    min-height: 100vh;
    margin: 0;
}

.wrapper {
    display: flex;
    height: 100vh;
    width: 100vw;
}

.content {
    flex-grow: 1;
    border: 2px solid blue;
    overflow-x: hidden;
}

.table-wrapper {
    overflow-x: scroll;
    width: 100%;
    border: 2px solid green;
}

table {
    border: 2px solid red;
}

.nav {
    background: #eee;
    height: 100%;
    flex: 0 0 300px;
}

td {
    padding: 0.5rem;
    min-width: 25rem;
}

<div >
      <div ></div>
      <div >
        <div >
          <table>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Third</td>
              <td>Third</td>
              <td>Third</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Third</td>
              <td>Third</td>
              <td>Third</td>
              <td>Third</td>
            </tr>
          </table>
        </div>
      </div>
    </div>