如何使用CSS Flexbox构建挂表

问题描述 投票：0回答：1

我正在尝试使用Flexbox构建悬挂式的表格视图。它是数据驱动的，并且是弹出式模式，我希望它能够响应。我想用<table>做的事很容易，但是将来如果需要的话，这将不会产生重塑它的能力。

我正在尝试构建的是这样的：

┌────────┬──────┬────────────┐
│        │      │            │
│  2020  │  Q4  │  December  │
│        │      │  November  │
│        │      │  October   │
│        │      │            │
│        │  Q3  │  September │
│        │      │  August    │
│        │      │  July      │
│        │      │            │
│        │  Q2  │  June      │
│        │      │  May       │
│        │      │  April     │
│        │      │            │
│        │  Q1  │  March     │
│        │      │  February  │
│        │      │  January   │
│        │      │            │
├────────┼──────┼────────────┤
│        │      │            │
│  2019  │  Q4  │  December  │
│        │      │  November  │
│        │      │  October   │
│        │      │            │
│        │  Q3  │  September │
│        │      │  August    │
│        │      │  July      │
│        │      │            │
│        │  Q2  │  June      │
│        │      │  May       │
│        │      │  April     │
│        │      │            │
│        │  Q1  │  March     │
│        │      │  February  │
│        │      │  January   │
│        │      │            │
└────────┴──────┴────────────┘

或者，但不太有用，它可能像这样：

┌─────────┬──────┬────────────────────────────────┐
│         │      │                                │
│  2020   │  Q4  │  October  November  December   │
│         │      │                                │
│         │  Q3  │  July     August    September  │
│         │      │                                │
│         │  Q2  │  April    May       June       │
│         │      │                                │
│         │  Q1  │  January  February  March      │
│         │      │                                │
├─────────┼──────┼────────────────────────────────┤
│         │      │                                │
│  2019   │  Q4  │  October  November  December   │
│         │      │                                │
│         │  Q3  │  July     August    September  │
│         │      │                                │
│         │  Q2  │  April    May       June       │
│         │      │                                │
│         │  Q1  │  January  February  March      │
│         │      │                                │
└─────────┴──────┴────────────────────────────────┘

每个标签实际上将是一个<button>。

作为示例，我构建了一个<table>版本（下面的第一个代码示例），而我目前正在尽最大努力使用Flexbox（下面的第二个代码示例），这无法平衡这三个方面列，但与我想要的接近。

编辑：根据要求，我已在代码中进行内联模式。

<table>示例显示了我想要的结构：

table {
  width: 90%;
}

td {
  width: 33%;
  text-align: top;
  vertical-align: top;
}
<html>

<body>
  <table>
    <tr>
      <td rowspan="12">
        <button>2020</button>
      </td>
      <td rowspan="3">
        <button>Q4</button>
      </td>
      <td><button>January</button></td>
    </tr>
    <tr>
      <td><button>December</button></td>
    </tr>
    <tr>
      <td><button>November</button></td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q3</button>
      </td>
      <td>
        <button>October</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>September</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>August</button>
      </td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q2</button>
      </td>
      <td><button>July</button></td>
      </td>
    </tr>
    <tr>
      <td><button>June</button></td>
    </tr>
    <tr>
      <td><button>May</button>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q1</button>
      </td>
      <td>
        <button>April</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>March</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>February</button>
      </td>
    </tr>
    <tr>
      <td rowspan="12">
        <button>2019</button>
      </td>
      <td rowspan="3">
        <button>Q4</button>
      </td>
      <td><button>January</button></td>
    </tr>
    <tr>
      <td><button>December</button></td>
    </tr>
    <tr>
      <td><button>November</button></td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q3</button>
      </td>
      <td>
        <button>October</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>September</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>August</button>
      </td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q2</button>
      </td>
      <td><button>July</button></td>
      </td>
    </tr>
    <tr>
      <td><button>June</button></td>
    </tr>
    <tr>
      <td><button>May</button>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q1</button>
      </td>
      <td>
        <button>April</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>March</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>February</button>
      </td>
    </tr>
    <tr>
      <td rowspan="12">
        <button>2018</button>
      </td>
      <td rowspan="3">
        <button>Q4</button>
      </td>
      <td><button>January</button></td>
    </tr>
    <tr>
      <td><button>December</button></td>
    </tr>
    <tr>
      <td><button>November</button></td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q3</button>
      </td>
      <td>
        <button>October</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>September</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>August</button>
      </td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q2</button>
      </td>
      <td><button>July</button></td>
      </td>
    </tr>
    <tr>
      <td><button>June</button></td>
    </tr>
    <tr>
      <td><button>May</button>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q1</button>
      </td>
      <td>
        <button>April</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>March</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>February</button>
      </td>
    </tr>
    <tr>
      <td rowspan="12">
        <button>2017</button>
      </td>
      <td rowspan="3">
        <button>Q4</button>
      </td>
      <td><button>January</button></td>
    </tr>
    <tr>
      <td><button>December</button></td>
    </tr>
    <tr>
      <td><button>November</button></td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q3</button>
      </td>
      <td>
        <button>October</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>September</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>August</button>
      </td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q2</button>
      </td>
      <td><button>July</button></td>
      </td>
    </tr>
    <tr>
      <td><button>June</button></td>
    </tr>
    <tr>
      <td><button>May</button>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q1</button>
      </td>
      <td>
        <button>April</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>March</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>February</button>
      </td>
    </tr>
  </table>
</body>

</html>

Flexbox当前的最大努力：

.container {
  height: 100%;
  width: 100%;
}

.rows {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.year {
  border: 1px solid black;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 1;
}

.quarter {
  flex-grow: 2;
  border: 1px dashed blue;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.month {
  border: 1px dotted green;
}
<html>

<body>
  <div class="container rows">
    <div class="year">
      <button>2020</button>
      <div class="rows">
        <div class="quarter">
          <button>Q4</button>
          <div class="month rows">
            <button>January</button>
            <button>December</button>
            <button>November</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q3</button>
          <div class="month rows">
            <button>October</button>
            <button>September</button>
            <button>August</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q2</button>
          <div class="month rows">
            <button>July</button>
            <button>June</button>
            <button>May</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q1</button>
          <div class="month rows">
            <button>April</button>
            <button>March</button>
            <button>February</button>
          </div>
        </div>
      </div>
    </div>
    <div class="year">
      <button>2019</button>
      <div class="rows">
        <div class="quarter">
          <button>Q4</button>
          <div class="month rows">
            <button>January</button>
            <button>December</button>
            <button>November</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q3</button>
          <div class="month rows">
            <button>October</button>
            <button>September</button>
            <button>August</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q2</button>
          <div class="month rows">
            <button>July</button>
            <button>June</button>
            <button>May</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q1</button>
          <div class="month rows">
            <button>April</button>
            <button>March</button>
            <button>February</button>
          </div>
        </div>
      </div>
    </div>
    <div class="year">
      <button>2018</button>
      <div class="rows">
        <div class="quarter">
          <button>Q4</button>
          <div class="month rows">
            <button>January</button>
            <button>December</button>
            <button>November</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q3</button>
          <div class="month rows">
            <button>October</button>
            <button>September</button>
            <button>August</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q2</button>
          <div class="month rows">
            <button>July</button>
            <button>June</button>
            <button>May</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q1</button>
          <div class="month rows">
            <button>April</button>
            <button>March</button>
            <button>February</button>
          </div>
        </div>
      </div>
    </div>
    <div class="year">
      <button>2017</button>
      <div class="rows">
        <div class="quarter">
          <button>Q4</button>
          <div class="month rows">
            <button>January</button>
            <button>December</button>
            <button>November</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q3</button>
          <div class="month rows">
            <button>October</button>
            <button>September</button>
            <button>August</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q2</button>
          <div class="month rows">
            <button>July</button>
            <button>June</button>
            <button>May</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q1</button>
          <div class="month rows">
            <button>April</button>
            <button>March</button>
            <button>February</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
html css flexbox
1个回答
1
投票

Flex可以单独执行此操作，但效率不高。

网格可以提供干净，简单和轻便的解决方案。 Flex可以有所帮助。

下面的代码满足您对适应性和维护的要求。

.container {}

.year {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  height: 50vh; /* demo */
  width: 50vw;  /* demo */
  border: 1px solid black;
}

button {
  align-self: start;
  justify-self: start;
}

.rows {
  display: flex;
  flex-direction: column;
}

.quarter {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.month {}
<div class="container rows">
  <div class="year">
    <button>2020</button>
    <div class="rows">
      <div class="quarter">
        <button>Q4</button>
        <div class="month rows">
          <button>January</button>
          <button>December</button>
          <button>November</button>
        </div>
      </div>
      <div class="quarter">
        <button>Q3</button>
        <div class="month rows">
          <button>October</button>
          <button>September</button>
          <button>August</button>
        </div>
      </div>
      <div class="quarter">
        <button>Q2</button>
        <div class="month rows">
          <button>July</button>
          <button>June</button>
          <button>May</button>
        </div>
      </div>
      <div class="quarter">
        <button>Q1</button>
        <div class="month rows">
          <button>April</button>
          <button>March</button>
          <button>February</button>
        </div>
      </div>
    </div>
  </div>
</div>

revised codepen

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.