防止表格水平拉伸整个 Blazor 页面

Question

我创建了一个 Blazor WebAssembly 解决方案，并从示例 Blazor 应用程序构建它。我必须使用需要水平溢出的表（它有太多列）。不幸的是，溢出的表格拉伸了

table-container

div 和整个

page

，并在整个页面上添加了水平滚动条。

我想要发生的事情是仅向包含表格的 div 添加水平滚动条（下例中的

table-container

），大概是

overflow-x: auto;

。水平滚动条不应出现在整个页面上。此外，我不希望表格拉伸其容器或任何其他元素。

我见过的一个可行的解决方案是将

page

元素设置为

display-block

，而不是

display-flex

，因为弹性行为似乎会导致此问题。然后我需要重新排列所有其他元素 - 所以我想如果可能的话避免这种情况。使用

table-container

设置

vw

的宽度也可以解决该问题，但我不确定它是否在所有屏幕上都具有足够的响应能力。

除了使用

vw

固定div的宽度，或者将整个应用程序更改为

display-block

之外，还有其他解决方案吗？

为了重现此场景，请执行以下操作：

• 创建示例 Blazor WebAssembly 托管应用程序
• 使用以下示例之一创建页面

简单段落示例

我添加了 2000px 宽度来模拟溢出。

    @page "/test"
    
    <div id="should-contain-scrollbar" class="mt-2" style=" overflow-x: auto; white-space: nowrap;">
        <div style="width: 2000px;">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae nunc sed velit dignissim sodales ut eu sem. Imperdiet dui accumsan sit amet nulla. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Congue quisque egestas diam in arcu cursus. Mattis nunc sed blandit libero volutpat sed cras ornare. Vitae congue mauris rhoncus aenean vel elit scelerisque. Pellentesque diam volutpat commodo sed egestas. Vitae tempus quam pellentesque nec. Egestas sed sed risus pretium.
            </p>
    
            <p>
                Dolor purus non enim praesent elementum facilisis leo vel fringilla. Arcu bibendum at varius vel pharetra vel turpis. Adipiscing elit duis tristique sollicitudin. Diam vulputate ut pharetra sit. Mauris sit amet massa vitae tortor condimentum lacinia quis vel. Nisl pretium fusce id velit ut tortor pretium. Mauris ultrices eros in cursus turpis massa. Donec adipiscing tristique risus nec. Lorem sed risus ultricies tristique. Arcu bibendum at varius vel pharetra vel. Ac ut consequat semper viverra. A arcu cursus vitae congue mauris rhoncus. Malesuada proin libero nunc consequat interdum varius sit amet. Vitae suscipit tellus mauris a. Nunc vel risus commodo viverra maecenas accumsan lacus vel. Netus et malesuada fames ac turpis.
            </p>
    
            <p>
                Auctor neque vitae tempus quam pellentesque nec nam. Leo in vitae turpis massa sed elementum tempus. Sapien faucibus et molestie ac. Cursus eget nunc scelerisque viverra mauris. Elit eget gravida cum sociis natoque penatibus. Et tortor consequat id porta nibh venenatis. Amet commodo nulla facilisi nullam. Sapien faucibus et molestie ac feugiat. Vitae tempus quam pellentesque nec nam aliquam. Id volutpat lacus laoreet non curabitur gravida arcu ac. Mi bibendum neque egestas congue quisque egestas diam in arcu. Tellus id interdum velit laoreet id donec ultrices. Id eu nisl nunc mi ipsum faucibus vitae. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Non pulvinar neque laoreet suspendisse interdum. Quam id leo in vitae turpis. Parturient montes nascetur ridiculus mus mauris vitae ultricies. Venenatis lectus magna fringilla urna.
            </p>
    
            <p>
                Risus viverra adipiscing at in tellus integer feugiat. Massa enim nec dui nunc mattis enim. Commodo ullamcorper a lacus vestibulum sed arcu non. Fermentum leo vel orci porta non pulvinar. Habitant morbi tristique senectus et netus et malesuada fames. Quam id leo in vitae turpis massa sed elementum tempus. Nullam eget felis eget nunc. Varius sit amet mattis vulputate enim nulla aliquet porttitor. Odio facilisis mauris sit amet massa. Morbi tempus iaculis urna id volutpat. Phasellus egestas tellus rutrum tellus pellentesque. Quisque egestas diam in arcu cursus euismod. Semper feugiat nibh sed pulvinar proin gravida hendrerit. Condimentum lacinia quis vel eros donec ac odio tempor. Donec pretium vulputate sapien nec. Donec ultrices tincidunt arcu non sodales.
            </p>
    
            <p>
                Ornare arcu dui vivamus arcu felis bibendum. Justo laoreet sit amet cursus. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit duis. Urna et pharetra pharetra massa massa ultricies mi quis. Pellentesque adipiscing commodo elit at imperdiet dui. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Sollicitudin nibh sit amet commodo nulla. Arcu bibendum at varius vel pharetra. Porttitor lacus luctus accumsan tortor posuere ac ut consequat. Turpis egestas maecenas pharetra convallis. Eget velit aliquet sagittis id consectetur purus ut. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Curabitur gravida arcu ac tortor dignissim. Egestas congue quisque egestas diam. Auctor eu augue ut lectus arcu bibendum. Donec ultrices tincidunt arcu non sodales neque. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Non quam lacus suspendisse faucibus interdum. Condimentum vitae sapien pellentesque habitant morbi tristique senectus.
            </p>
        </div>
    </div>

简单表格示例

    @page "/test-table"
    
     <div id="table-container" class="mt-2" style="white-space: nowrap;">
        <table class="table">
            <thead>
                <tr>
                    <td>One</td>
                    <td>Two</td>
                    <td>Three</td>
                    <td>Four</td>
                    <td>Five</td>
                    <td>Six</td>
                    <td>Seven</td>
                    <td>Eight</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae nunc sed velit dignissim sodales ut eu sem. Imperdiet dui accumsan sit amet nulla. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Congue quisque egestas diam in arcu cursus. Mattis nunc sed blandit libero volutpat sed cras ornare. Vitae congue mauris rhoncus aenean vel elit scelerisque. Pellentesque diam volutpat commodo sed egestas. Vitae tempus quam pellentesque nec. Egestas sed sed risus pretium.
                    </td>
                    <td>Two</td>
                    <td>Three</td>
                    <td>Four</td>
                    <td>
                        03cc6a8e-951b-11ee-b9d1-0242ac120002
                    </td>
                    <td>
                        083e7c1a-951b-11ee-b9d1-0242ac120002
                    </td>
                    <td>
                        499b9247-69de-4bd6-8650-d18b31e3d33f
                    </td>
                    <td>
                        098e82e3-0bbf-4f00-804e-caf401d06e14
                    </td>
                </tr>
                <tr>
                    <td>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae nunc sed velit dignissim sodales ut eu sem. Imperdiet dui accumsan sit amet nulla. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Congue quisque egestas diam in arcu cursus. Mattis nunc sed blandit libero volutpat sed cras ornare. Vitae congue mauris rhoncus aenean vel elit scelerisque. Pellentesque diam volutpat commodo sed egestas. Vitae tempus quam pellentesque nec. Egestas sed sed risus pretium.
                    </td>
                    <td>Two</td>
                    <td>Three</td>
                    <td>Four</td>
                    <td>
                        03cc6a8e-951b-11ee-b9d1-0242ac120002
                    </td>
                    <td>
                        083e7c1a-951b-11ee-b9d1-0242ac120002
                    </td>
                    <td>
                        499b9247-69de-4bd6-8650-d18b31e3d33f
                    </td>
                    <td>
                        098e82e3-0bbf-4f00-804e-caf401d06e14
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

Answer 1

将

width: 0; min-width: 100%;

添加到

#should-contain-scrollbar

和

#table-container

div。