Как согнуть коробку вдоль оси x с помощью flexbox - PullRequest
Новая
       13

Как согнуть коробку вдоль оси x с помощью flexbox

0 голосов
/ 24 апреля 2020

Я создал прокручиваемую таблицу в гибком контейнере. Я пытаюсь заставить коробку таблицы сгибаться вдоль оси x, когда размер окна изменяется по горизонтали. Мне не нужно уменьшать содержимое таблицы, просто поле, чтобы уменьшить содержимое. У меня это изгибается вдоль оси Y, когда окно изменено в вертикальном размере. Есть ли способ сделать это? 

@import url(https://fonts.googleapis.com/css2?family=Overpass&display=swap);
body {
  background-color: #060c17;
  font-family: 'Overpass', sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: center;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin-bottom: 20px;
  justify-content: center;
}

.navbar {
  position: fixed;
  padding: 20px;
  background: #0c1427;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  text-align: center;
  align-items: center;
  border-bottom: 1px solid #262f43;
}

.navbar a {
  font-size: 20px;
  color: white;
}

.table-row {
  display: flex;
}

.table-box {
  display: flex;
  background-color: #0c1427;
  border: 1px solid #262f43;
  border-radius: 0.25rem;
  min-width: 0;
  margin-top: 90px;
  bottom: 0;
  overflow: auto;
}

.table {
  border-collapse: collapse;
  font-size: 14px;
}

.table thead {
  color: #7886a1;
}

.table tbody {
  color: white;
}

.table thead tbody {
  min-width: 0;
}

.table thead th {
  text-align: left;
  border-bottom: 1px solid #262f43;
  padding: 10px 40px;
}

.table tbody td {
  text-align: left;
  border-bottom: 1px solid #262f43;
  padding: 10px 40px;
}
<div class="container">
  <nav class="navbar">
    <a>#</a>
  </nav>
  <div class="table-box">
    <div class="table-row">
      <table class="table">
        <thead>
          <tr>
            <th>TIME</th>
            <th>TICKER</th>
            <th>CALL/PUT</th>
            <th>EXPIRY</th>
            <th>STRIKE</th>
            <th>SPOT</th>
            <th>PRICE</th>
            <th>SIZE</th>
            <th>TOTAL</th>
            <th>OI</th>
            <th>IV</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #ff3366;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#10b759;">CALL</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #ff3366;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#10b759;">CALL</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
          <tr>
            <td>00:12:34</td>
            <td style="color: orange;">BTC</td>
            <td style="color:#ff3366;">PUT</td>
            <td>4/28</td>
            <td>$7800</td>
            <td>$7219</td>
            <td>₿0.031</td>
            <td>20</td>
            <td style="color: #10b759;">₿62</td>
            <td>1120</td>
            <td>60.9%</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 24 апреля 2020

Из вашего описания не ясно, что именно вы хотите. Но я удалил гибкий контейнер и установил ширину 97vw, чтобы учесть полосу прокрутки: 

`https://codepen.io/msmfa/pen/BaoWyNb`

, и он делает то, что, я думаю, вы хотите достичь ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...