Здесь я устанавливаю содержимое с помощью display-flex css в родительском main-wrapper, но я хочу переполнять содержимое таблицы при прокрутке.

Это можно решить с помощью float:left css, но я не хочу задавать структуру с помощью float:left.

Так что нужно только правое содержимое при прокрутке, а не прокрутку всей страницы.

* {
            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>
2
Jignesh Panchal 19 Мар 2021 в 10:03

1 ответ

Лучший ответ

Не могли бы вы проверить приведенный ниже код? Надеюсь, это сработает для вас. Вам нужно указать ширину для .main-content и максимальную ширину для .table-wrapper.

Перейдите по этой ссылке: 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>
1
Yudiz Solutions 19 Мар 2021 в 07:35