时间戳

首页 > 解决方案 > 如何使可滚动表格占容器剩余宽度的 100%，而不是屏幕？

html - 如何使可滚动表格占容器剩余宽度的 100%，而不是屏幕？

问题描述

在我的应用程序中，左侧“sidebar-left”上有侧边栏（折叠栏），右侧“内容”上有不同类型内容的容器。而且我无法处理这个容器的宽度，它必须占用剩余宽度的 100%，并且不同类型的内容它工作得很好，但是如果我将可滚动表放在这个“内容”容器中，它总是会尝试拉伸这个表在屏幕尺寸的 100% 中，但不是容器尺寸，并且屏幕宽度随着侧边栏尺寸的宽度而扩大。这是我的页面：

    .wrapper {
        display: flex;
        align-items: stretch;
      width: 100%;
    }

    .sidebar-left {
      width: 300px;
      background: red;
    }

    .content {
      /*width: calc(100% - 300px);  it works, but .sidebar-left should have flexible size*/
      width: 100%;
    }

    .sidebar-right {
      width: 20px;
      background: blue;
    }

    .scrollable-table {
        overflow: scroll;
        width: 100%;
        white-space:nowrap;
    }
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Collapsible sidebar using Bootstrap 4</title>

    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

</head>

<body>
    <div class="wrapper">
        <div class="sidebar-left">
            Sidebar left
        </div>
        <div class="content">
            <div data-v-e474bf0e="" class="scrollable-table">
                <table class="table table-striped table-hover table-sm">
                    <thead><tr><th class="sticky-first-column text-center">№ документа</th> <th class="sticky-second-column text-center">Дата</th> <th class="text-center">ст. Відправлення</th> <th class="text-center">ст. Призначення</th> <th class="text-center">Відправник</th> <th class="text-center">Отримувач</th> <th class="text-center">Вантаж</th> <th class="text-center">К-ть вагонів</th> <th class="text-center">Маса вантажу</th></tr></thead> 
                    <tbody><tr><td class="sticky-first-column text-center">33168097</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(341408) славута i</td> <td class="text-capitalize">(400409) одесса-порт (эксп.)</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(5711) Админитрация Одесского Морского Порта комплекс ЗПК ООО «Бруклин-Киев»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">5</td> <td class="text-right">3 477,60</td></tr><tr><td class="sticky-first-column text-center">33169244</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(334008) красилов</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">1</td> <td class="text-right">694,50</td></tr><tr><td class="sticky-first-column text-center">33169301</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(334008) красилов</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">3</td> <td class="text-right">2 087,00</td></tr><tr><td class="sticky-first-column text-center">33169343</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(334008) красилов</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">4</td> <td class="text-right">2 792,50</td></tr><tr><td class="sticky-first-column text-center">35991256</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(350303) дубно</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">8</td> <td class="text-right">5 388,50</td></tr><tr><td class="sticky-first-column text-center">35997469</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(350303) дубно</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">8</td> <td class="text-right">5 438,50</td></tr><tr><td class="sticky-first-column text-center">40831539</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(416604) блакитное</td> <td class="text-capitalize">(424507) ксениево (эксп.)</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3804) ООО «ИЗТ» для ПИИ «ГЛЕНКОР АГРІКАЛЧЕР УКРАЇНА»</td> <td class="text-capitalize">(014003) Ячмень</td> <td class="text-right">4</td> <td class="text-right">2 358,50</td></tr><tr><td class="sticky-first-column text-center">43300730</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(443300) лихачево</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(2481) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3566) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">10</td> <td class="text-right">6 932,00</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
</div>
</body>

</html>

我尝试制作width: calc(100% - 300px);，但侧边栏必须折叠，它的大小从 80 像素到 300 像素不等。我发现了常见问题，但解决方案不适用于我的情况。它总是尝试将 .content div 拉伸到屏幕的 100% 宽度，而不是剩余宽度。

标签： htmlcssbootstrap-4

解决方案

通过使用 CSS 自定义属性（变量），我们可以实现这一点。

尝试这个。

:root {
--sidebar-left: 300px; /* sidebar width */

}
.wrapper {
        display: flex;
        align-items: stretch;
      width: 100%;
    }

    .sidebar-left {
      width: 300px;
      background: red;
    }

    .content {
      width: calc(100% - var(--sidebar-left));
    }

    .sidebar-right {
      width: 20px;
      background: blue;
    }

    .scrollable-table {
        overflow: scroll;
        width: 100%;
        white-space:nowrap;
    }

@media only screen and (max-width: 768px) {
:root {
--sidebar-left: 80px; /* sidebar width for screen sizes less than 768px */
}
}

推荐阅读