'Why does my table not respect the limits of the grid layout of its parent?

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?

htmlcssgrid-layout


Solution 1:[1]

Give a display: block; to your table and resize it the wayyouwant. I think that will solve your problem.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AVLESSI Matchoudi

Related Questions