Как изменить размер / масштаб таблицы на меньших экранах (Bootstrap4) без полосы прокрутки? - PullRequest
Новая
       12

Как изменить размер / масштаб таблицы на меньших экранах (Bootstrap4) без полосы прокрутки?

0 голосов
/ 16 февраля 2019

У меня есть некоторые проблемы с моим столом.

Что ж, моя идея: на меньших экранах размер таблицы должен изменяться / масштабироваться, но я хочу избегать полос прокрутки (причина в том, что я не использовал адаптивный к таблице класс).

Мне просто нужна таблица с самоизменяющимся размером, которая умещается на экране мобильного устройства (что-то вроде уменьшения масштаба, когда оно на мобильном телефоне)Это достижимо?

Я использую bootstrap4, и я пробовал некоторые решения (медиа-запросы и т. Д.), Но мне не повезло.

На данный момент только половина моей таблицы находится на экране мобильного телефона, остальные перекрываютсяscreen.

Вот мой код: https://jsfiddle.net/b9Lw06nt/

<section id="x" class="x">
  <div class="container">
    <table class="table borderless">
      <tr>
        <td valign=middle>
          <table border=0 cellpadding=0 cellspacing=0 align=center style="width: 100%;">
            <tr>
              <td colspan=3 align=center height=90 class="x1" valign=top>
                Lorem Ipsum
              </td>
            </tr>
            <tr>
              <td width=400 align=right valign=top>
                Lorem ipsum
              </td>
              <td width=45 align=center>
                Lorem ipsum
              </td>
              <td width=400 align=left valign=top>
                Lorem ipsum
              </td>
            </tr>
            <tr>
              <td align=right class=x2>
                Lorem Ipsum
              </td>
              <td width=45 align=center>
                Lorem Ipsum
              </td>
              <td align=left class=x2>
                Lorem Ipsum
              </td>
            </tr>
            <tr>
              <td align=right class=x2k>
                Lorem Ipsum
              </td>
              <td width=45 align=center>
                Lorem Ipsum
              </td>
              <td align=left class=x2>
                Lorem Ipsum
              </td>
            </tr>
            <tr>
              <td align=right class=x2>
                Lorem Ipsum
              </td>
              <td width=45 align=center>
                Lorem Ipsum
              </td>
              <td align=left class=x2>
                Lorem Ipsum
              </td>
            </tr>
            <tr>
              <td colspan=3 align=center valign=top>
                Lorem Ipsum
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</section>

И CSS: 

.table th, .table td {
    border-top: none !important;
    padding: 0px !important;
    white-space: nowrap;
}

Пожалуйста, не стесняйтесь предложить любую идею или решение.Спасибо.

...