How to scroll overflow table content while structure using flex css?

user_11297147 0
Viewed 32

Here i set content using display-flex css in parent main-wrapper, but i want to overflow content of table in scroll.

This can be solve using float:left css but i don't want to set structure using float:left.

So want just right side content on scroll not whole page scrolling.

* {
            margin: 0px;
            padding: 0px;
        }
        table, td, th {
          border: 1px solid black;
        }

        table {
          width: 100%;
          border-collapse: collapse;
          white-space: nowrap;
        }

        th,td {
            padding: 5px 10px;
        }

        .main-wrapper {
            display: flex;
        }

        .sidebar {
            width: 300px;
            height: 175px;
            display: block;
            min-width: 300px;
            background-color: #eeeeee;
            margin-right: 15px;
        }
        .table-wrapper {
            overflow: auto;
        }
<div class="main-wrapper">
        <div class="sidebar">
        </div>
        <div class="main-content">
            <div class="table-wrapper">
                <table>
                    <tr>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                        <th>Title Heading</th>
                    </tr>
                    <tr>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                    </tr>
                    <tr>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                        <td>Table content text</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

html-table css html
1 Answers

Can you please check the below code? Hope it will work for you. You need to give width to .main-content and max-width to .table-wrapper.

Please refer to this link: https://jsfiddle.net/yudizsolutions/9jbqudo1/1/

* {
  margin: 0px;
  padding: 0px;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
}

.main-wrapper {
  display: flex;
}

.sidebar {
  width: 300px;
  height: 175px;
  display: block;
  min-width: 300px;
  background-color: #eeeeee;
  margin-right: 15px;
}

.table-wrapper {
  overflow: auto;
  max-width: 100%;
}

.main-content {
  width: calc(100% - 300px);
}
<div class="main-wrapper">
  <div class="sidebar">
  </div>
  <div class="main-content">
    <div class="table-wrapper">
      <table>
        <tr>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
        </tr>
        <tr>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
        </tr>
        <tr>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
        </tr>
      </table>
    </div>
  </div>
</div>

user_122138960
Related