使用 x 溢出使显示 Flex 增长得和她的父级一样多

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

我的项目中有一个表有很多列，所以我需要使用 x Overflow 来滚动其所有内容。我的问题是，在表格下方，我有一个页脚需要与表格具有相同的宽度，并且当表格“启用”x 溢出时，页脚不会“拉伸”到与表格相同的宽度。请参阅下面的 gif 中的问题

我正在使用 Angular，所以我使用 html 和 scss:

<body>
    <section class="test-table">
        <table class="test-table__content">
            <thead>
                <tr>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                </tr>
            </tbody>
        </table>

        <footer>HERE IS MY PROBLEM - THIS FOOTER MUST HAVE THE SAME WIDTH OF THE TABLE</footer> 
    </section>
</body>

.test-table {
    overflow-x: scroll;

    &__content {
        width: 100%;

        & thead th {
            background-color: #FFFFFFB3;
            font-size: 1.1rem;
            color: #39CDDB;
        }

        & tbody {
            & td {
                text-align: center;
                min-width: 6rem;
            }

            & tr:nth-child(even) {
                background-color: #FFFFFFB3;
            }

            & tr:nth-child(odd) {
                background-color: #4D4F5333;

                td {
                    border-right: 1px solid gray;
                }
            }
        }
    }

    footer {
        display: flex;
        flex: 1;
        flex-grow: 1;
        flex-shrink: 1;
        background-color: red;
        color: yellow;
    }
}
html css flexbox frontend
1个回答
0
投票

如果将页脚放在 

section
标签之外并相应地调整 SCSS，您将获得所需的结果。它还避免了平移整个页面以及仅平移溢出的表格的需要。这对于手机等较小的设备来说更好。
页脚应该是它自己的节点，并且不能嵌套以维护 HTML 语义。

<section class="test-table">
  <table class="test-table__content">
    <thead>
      <tr>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
        <th scope="col">Test</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
      </tr>
    </tbody>
  </table>
</section>
<footer>HERE IS MY PROBLEM - THIS FOOTER MUST HAVE THE SAME WIDTH OF THE TABLE</footer>

.test-table {
  overflow-x: scroll;

  &__content {
    width: 100%;

    & thead th {
      background-color: #ffffffb3;
      font-size: 1.1rem;
      color: #39cddb;
    }

    & tbody {
      & td {
        text-align: center;
        min-width: 6rem;
      }

      & tr:nth-child(even) {
        background-color: #ffffffb3;
      }

      & tr:nth-child(odd) {
        background-color: #4d4f5333;

        td {
          border-right: 1px solid gray;
        }
      }
    }
  }
}
footer {
  display: flex;
  flex: 1;
  flex-grow: 1;
  flex-shrink: 1;
  background-color: red;
  color: yellow;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.