CODEWITHSUNDEEP
htmlcss
darkhorse
darkhorse

Reputation: 8752

How to make a table and all of its contents take the exact width and height of its parent container in HTML?

I have the following HTML document:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            overflow: hidden;
        }
        .top {
            width: 100%;
            height: 40px;
            background: rgba(0, 0, 0, 0.75);
            border-bottom: 1px solid blue;
            position: fixed;
            top: 0px;
            left: 0;
            z-index: 999;
        }
        .top table {
            width: 100%;
            border: 1px solid red;
            height: 100%;
        }
        .top table tr td {
            padding: 0px;
            margin: 0px;
        }
        .top table td button {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <div class="top">
        <table>
            <tr>
                <td>
                    <button>x</button>
                </td>
                <td>Something</td>
            </tr>
        </table>
    </div>

</body>
</html>

You can see it in action here:

https://jsfiddle.net/s2uxph1w/

As you can see, the top bar has a fixed height of 40px. I want the table and all of its content (specifically the button) to be exactly 40px in height. However, even without any padding or margin, the content of the table seems to overflow. Why is this? And how can I fix this issue?

Upvotes: 0

Views: 35

Answers (2)

weegee
weegee

Reputation: 3409

Just do

.top table {
   border-collapse: collapse;
}

To collapse the extra border padding and margin. Which is the reason why the spacing was there.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            overflow: hidden;
        }
        .top {
            width: 100%;
            height: 40px;
            background: rgba(0, 0, 0, 0.75);
            border-bottom: 1px solid blue;
            position: fixed;
            top: 0px;
            left: 0;
            z-index: 999;
        }
        .top table {
            width: 100%;
            border: 1px solid red;
            height: 100%;
            border-collapse: collapse;
        }
        .top table tr td {
            padding: 0px;
            margin: 0px;
        }
        .top table td button {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <div class="top">
        <table>
            <tr>
                <td>
                    <button>x</button>
                </td>
                <td>Something</td>
            </tr>
        </table>
    </div>
    
</body>
</html>

Upvotes: 1

fiveobjects
fiveobjects

Reputation: 4319

Here the button is not overflowing, rather the table has default spacing. Add the following to the table:

.top table {
    border-spacing:0px;
}

Upvotes: 1

Related Questions