Блог

Главная - Вопросы по программированию - Как прокручивать содержимое переполненной таблицы при структурировании с помощью flex css?

Как прокручивать содержимое переполненной таблицы при структурировании с помощью flex css?

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Здесь я устанавливаю содержимое с помощью 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>

Ответ №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>