CODEWITHSUNDEEP
htmlcss
nishant80
nishant80

Reputation: 126

HTML: How to increase width of table columns when the table is inside a div with fixed width

The following piece of HTML code creates a table inside a div of fixed width. It seems that the "th,td" width is inherited from the parent div (but the W3 documentation says that it is not a inherited property!).

How do I increase the width of table columns (say 500px)?

You can see that changing the width value in "th, td" selector does not have any impact on width.

Please note:
- I do not want to change the width of div
- I do not want to set a fixed width to my table
- I have tried "table-layout: fixed;" inside table selector. It did not make the "td,th" width property work.

<!DOCTYPE html>
<html>

    <head>
        <style>
            table {
                border-collapse:collapse;
            }
            table, td, th {
                border:1px solid black;
            }
            th, td {
                /* Changing width doesn't make any difference */
                width:500px;
            }
            .myclass {
                width:200px;
                overflow:auto
            }
        </style>
    </head>

    <body>
        <div class="myclass">
            <table>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Savings</th>
                    <th>Expenditure</th>
                </tr>
                <tr>
                    <td>Peter</td>
                    <td>Griffin</td>
                    <td>$100</td>
                    <td>$50</td>
                </tr>
            </table>
        </div>
    </body>

</html>

Upvotes: 1

Views: 2823

Answers (2)

nishant80
nishant80

Reputation: 126

Finally, made it work!

"table-layout:fixed; width:100%" did the trick...

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border-collapse:collapse;
        }
        table, td, th {
            border:1px solid black;
        }
        th, td {
            /* Changing width doesn't make any difference */
            width:500px;
        }
        .myclass {
            width:200px;
            overflow:auto
        }
    </style>
</head>

<body>
    <div class="myclass">
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
                <th>Expenditure</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
                <td>$50</td>
            </tr>
        </table>
    </div>
</body>

</html>

Upvotes: 1

Simon Staton
Simon Staton

Reputation: 4505

Why not use percentages?

jsfiddle: http://jsfiddle.net/qCYDq/

also you are limiting yourself with 200px in width, if the text inside the table (word width) is larger than your 200px it will force its width and then cause your scroller to appear as the table will stretch to fit the words.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse:collapse;
    width: 100%;
    font-size: 9px;
}
td,th { 
    border:1px solid black;
    width: 25%;
}
.myclass
{
    width:200px;
    overflow:auto
}
</style>
</head>
<body>    
<div class="myclass">
    <table>
        <tr>
           <th>Firstname</th>
           <th>Lastname</th>
           <th>Savings</th>
           <th>Expenditure</th>
        </tr>
        <tr>
           <td>Peter</td>
           <td>Griffin</td>
           <td>$100</td>
           <td>$50</td>
        </tr>
    </table>
</div>
</body>
</html>

Upvotes: 2

Related Questions