为什么我的桌子不尊重其父母的网格布局的限制？

发布于 2025-01-25 01:56:03 字数 4474 浏览 2 评论 0原文

考虑一个网格布局，将我的页面置于2列中：左列被推出以占据屏幕宽度的35％。在此列内，我放置了一个标题和桌子。当标头末端的左列结束时，桌子超出了左柱边框。我不知道会导致这个问题的是什么。我试图重建它。请查看以下HTML和CSS：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./table-style.css" rel="stylesheet">
    <title>Table</title>
</head>
<body>

    <div class="container">
        <div class="left">
            <div class="header">
                <div class="header-left"></div>
                <div class="header-right"></div>
            </div>
            <div class="tbl-container">
                <div class="tbl">
                    <table>
                        <thead>
                            <th>Column 1</th>
                            <th>Column 2</th>
                            <th>Column 3</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                        </tbody>
                    </table>
                </div>    
            </div>
        </div>
        <div class="right"></div>    
    </div>  
</body>

CSS：

.container {
    display: grid;
    grid-template-columns: 50fr 50fr;
}
    
 .header {
    width: 100%;
    display: grid;
    grid-template-columns: 50fr 50fr;
}

.header-left {
    margin: 15px 20px 0 30px;
    padding: 10px;
    border: 2px solid black;
    box-sizing: border-box;
    max-width: 350px;
}

.header-right {
    margin: 15px 0 0 0;
    padding: 10px;
    border: 2px solid black;
    box-sizing: border-box;
}

.tbl-container {
    width: 100%;
    max-height: 100px;
    overflow: auto;
    min-width: 250px;
    max-height: 100px;
    margin: 20px 30px;
    box-sizing: border-box;
}

.tbl {
    width: 100%;
}

.tbl table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    background-color: gray;
}

table td {
    background-color: aqua;
}


::-webkit-scrollbar {
    width: 20px;
    background-color: transparent;
    border-radius: 15px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: black;
    border: 4px solid transparent;
    background-clip: padding-box;
  }

使用开发人员工具播放，您会发现该表已重叠到我的网格布局的右列中。

显然，我希望我的桌子尊重其父容器的限制。我还希望标题内的合适的容器能够准确地结束桌子的滚动栏的启动位置。

我设法调整了CSS，使结果看起来像我想要的方式，但我仍然不明白为什么。从上方开始对CSS类的唯一更改是我的TBL-符合者的calc（100％-30px）的宽度，而不是100％和的边距20px等于我的右列标题：

CSS更改：

.header-right {
    margin: 15px 20px 0 0;
    padding: 10px;
    border: 2px solid black;
    box-sizing: border-box;
}

.tbl-container {
    width: calc(100% - 30px);
    max-height: 100px;
    overflow: auto;
    min-width: 250px;
    max-height: 100px;
    margin: 20px 30px;
    box-sizing: border-box;
}

我无法解释此行为。对我来说尤其奇怪的是，我必须更改TBL容器的宽度，而不是桌子本身的宽度。有人可以帮我吗？

原文

Consider a grid layout, which devides my page into 2 columns: The left column is suppossed to take up 35% of the screen width. Inside this column, I place a header as well as a table. While the header ends where the left column ends, the table goes beyond the left-column border. I have no idea whatsoever what might be causing this issue. I have tried to rebuild it. Please checkout the following HTML and CSS:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./table-style.css" rel="stylesheet">
    <title>Table</title>
</head>
<body>

    <div class="container">
        <div class="left">
            <div class="header">
                <div class="header-left"></div>
                <div class="header-right"></div>
            </div>
            <div class="tbl-container">
                <div class="tbl">
                    <table>
                        <thead>
                            <th>Column 1</th>
                            <th>Column 2</th>
                            <th>Column 3</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                        </tbody>
                    </table>
                </div>    
            </div>
        </div>
        <div class="right"></div>    
    </div>  
</body>

CSS:

.container {
    display: grid;
    grid-template-columns: 50fr 50fr;
}
    
 .header {
    width: 100%;
    display: grid;
    grid-template-columns: 50fr 50fr;
}

.header-left {
    margin: 15px 20px 0 30px;
    padding: 10px;
    border: 2px solid black;
    box-sizing: border-box;
    max-width: 350px;
}

.header-right {
    margin: 15px 0 0 0;
    padding: 10px;
    border: 2px solid black;
    box-sizing: border-box;
}

.tbl-container {
    width: 100%;
    max-height: 100px;
    overflow: auto;
    min-width: 250px;
    max-height: 100px;
    margin: 20px 30px;
    box-sizing: border-box;
}

.tbl {
    width: 100%;
}

.tbl table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    background-color: gray;
}

table td {
    background-color: aqua;
}


::-webkit-scrollbar {
    width: 20px;
    background-color: transparent;
    border-radius: 15px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: black;
    border: 4px solid transparent;
    background-clip: padding-box;
  }

Play around with your developer tools and you will see that the table is overlapping into the right column of my grid layout.

Obviously, I want my table to respect the limits of its parent container. I also want the right container inside the header to end exactly where the scrollbar of my table starts.

I have managed to adapt my CSS such that the result looks the way I want it to, but I still don't understand why. The only changes to the CSS classes from above are a width of calc(100% - 30px) for my tbl-container instead of 100% and a margin of 20px, which equals the scrollbar width, to my right column header:

CSS changes:

.header-right {
    margin: 15px 20px 0 0;
    padding: 10px;
    border: 2px solid black;
    box-sizing: border-box;
}

.tbl-container {
    width: calc(100% - 30px);
    max-height: 100px;
    overflow: auto;
    min-width: 250px;
    max-height: 100px;
    margin: 20px 30px;
    box-sizing: border-box;
}

I cannot explain this behavior. What is especially weird to me is that I had to change the width of the tbl-container and not of the table itself. Can somebody help me out?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陪你到最终 2025-02-01 01:56:03

将显示：block;将其放在您的表格中，然后将其调整为WayYouwant。我认为这将解决您的问题。

回复收藏 0 原文

最初的梦 2025-02-01 01:56:03

添加“溢出：隐藏；”在“左”课程中解决了问题。

.left
{
    overflow: hidden;
}
.container {
    display: grid;
    grid-template-columns: 50fr 50fr;
}
    
 .header {
    width: 100%;
    display: grid;
    grid-template-columns: 50fr 50fr;
}

.header-left {
    margin: 15px 20px 0 30px;
    padding: 10px;
    border: 2px solid black;
    box-sizing: border-box;
    max-width: 350px;
}

.header-right {
    margin: 15px 0 0 0;
    padding: 10px;
    border: 2px solid black;
    box-sizing: border-box;
}

.tbl-container {
    width: 100%;
    max-height: 100px;
    overflow: auto;
    min-width: 250px;
    max-height: 100px;
    margin: 20px 30px;
    box-sizing: border-box;
}

.tbl {
    width: 100%;
}

.tbl table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    background-color: gray;
}

table td {
    background-color: aqua;
}


::-webkit-scrollbar {
    width: 20px;
    background-color: transparent;
    border-radius: 15px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: black;
    border: 4px solid transparent;
    background-clip: padding-box;
  }

    <div class="container">
        <div class="left">
            <div class="header">
                <div class="header-left"></div>
                <div class="header-right"></div>
            </div>
            <div class="tbl-container">
                <div class="tbl">
                    <table>
                        <thead>
                            <th>Column 1</th>
                            <th>Column 2</th>
                            <th>Column 3</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                        </tbody>
                    </table>
                </div>    
            </div>
        </div>
        <div class="right"></div>    
    </div>

Adding "overflow: hidden;" to the "left" class solves the problem.

.left
{
    overflow: hidden;
}
.container {
    display: grid;
    grid-template-columns: 50fr 50fr;
}
    
 .header {
    width: 100%;
    display: grid;
    grid-template-columns: 50fr 50fr;
}

.header-left {
    margin: 15px 20px 0 30px;
    padding: 10px;
    border: 2px solid black;
    box-sizing: border-box;
    max-width: 350px;
}

.header-right {
    margin: 15px 0 0 0;
    padding: 10px;
    border: 2px solid black;
    box-sizing: border-box;
}

.tbl-container {
    width: 100%;
    max-height: 100px;
    overflow: auto;
    min-width: 250px;
    max-height: 100px;
    margin: 20px 30px;
    box-sizing: border-box;
}

.tbl {
    width: 100%;
}

.tbl table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    background-color: gray;
}

table td {
    background-color: aqua;
}


::-webkit-scrollbar {
    width: 20px;
    background-color: transparent;
    border-radius: 15px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: black;
    border: 4px solid transparent;
    background-clip: padding-box;
  }

    <div class="container">
        <div class="left">
            <div class="header">
                <div class="header-left"></div>
                <div class="header-right"></div>
            </div>
            <div class="tbl-container">
                <div class="tbl">
                    <table>
                        <thead>
                            <th>Column 1</th>
                            <th>Column 2</th>
                            <th>Column 3</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                            <tr>
                                <td>example</td>
                                <td>example</td>
                                <td>example</td>
                            </tr>
                        </tbody>
                    </table>
                </div>    
            </div>
        </div>
        <div class="right"></div>    
    </div>

回复收藏 0 原文

~没有更多了~