CODEWITHSUNDEEP
htmlcss
Supersuslik
Supersuslik

Reputation: 39

HTML table expands beyond the last row when the browser stretches

I coded a 2-rows/2-column HTML table as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            table, th, td {
              border: 2px solid black;
              border-collapse: collapse;
              align-content: center;
              text-align: center;
            }
            th, td {
              padding: 10px;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Header Column 1</th>
                <th>Header Column 1</th>
            </tr>
            <tr>
                <td>Data Column 1</td>
                <td>Data Column 2</td>
            </tr>
        </table>
    </body>
</html>

When the browser window is equal or less than the width of both columns - all looks nice. However, when the browser window is stretched wider - the table expands with it, kind of creating additional column after the last column coded until the end of the width of the browser window. I tried to Google why is that and how to prevent the table to expand beyond the las column with the browser - I could not find any relevant HTML/CSS attribute. Any suggestions?

Upvotes: 1

Views: 196

Answers (1)

djreyab
djreyab

Reputation: 111

When I played with the code, it displayed correctly in internet explorer and chrome without altering. It may be a browser issue or if you're running a local server close it, make sure all changes to the file are saved, and run the server again. Sometimes the servers don't reload after you save.

For methods to limit the width just use css width or max width. See this for more information and syntax.

If you wanted to play around with bootstrap, they also have classes for making responsive tables.

Someone else asked a question discussing sizing a table, you can see if the answer works for you also.

Upvotes: 2

Related Questions