Как создать таблицу в bootstrp, которая в мобильном представлении не будет прокручиваться по оси x, но все еще будет видна? L

Question

Я создал таблицу, используя bootstrap, и поместил ее в div класса container-liquid. На рабочем столе это выглядит так:

В моем CSS я использовал @media, чтобы определить определенную ширину, при которой мой контейнер-жидкость займет 100% от на экране, но все еще в мобильном представлении, часть правой стороны таблицы скрыта, и мне нужно прокрутить ее по горизонтали, чтобы увидеть ее. Это выглядит так:

Мой соответствующий код html:

<div class="container-fluid" id="tableCont">

    <table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Product Name</th>
                <th title="Quantity of the product" scope="col">Quantity</th>
                <th scope="col"></th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Tomato </td>
                <td><input type="number" min="1" max="50"></td>
                <td><button title="Include product in list">Include</button></td>
                <td> <button type="button" class="btn btn-labeled btn-danger">
                        <span class="fa fa-remove"></span> Remove</button>
                </td>

            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Potato</td>
                <td><input type="number" min="1" max="50"></td>
                <td><button title="Include product in list">Include</button></td>
                <td> <button type="button" class="btn btn-labeled btn-danger">
                        <span class="fa fa-remove"></span> Remove</button></td>
            </tr>

Мой соответствующий CSS:

.table {
  width: 100%;
}
#tableCont {
  margin-top: 0;
  height: 400px;
  overflow-y: auto;
  border: white;
  width: 68%;
}
@media (max-width: 600px) {
  #tableCont {
    width: 100%;
  }
}

Как настроить мобильное представление таким образом, чтобы вся ширина таблицы была видна без горизонтальной прокрутки?

Answer 1

поместите это в свой тег head Html:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

и на свой CSS:

.table {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: fit-content;
}

, и если вы хотите, чтобы ваш контент начинался с левой стороны и все еще вписываясь в экран, поместите этот код в #tableCont:

#tableCont {
  display: inline-block;
  float: left;
}

, вы также можете решить эту проблему с сеткой CSS, поэтому, если вас это интересует, посетите https://www.w3schools.com/css/css_grid.asp

Answer 2

Попробуйте изменить ширину на максимальную в медиа-запросе.

@media (max-width: 600px) {
  #tableCont {
    max-width: 100%;
  }