CODEWITHSUNDEEP
phphtmlhtml-tablecss-tables
agdhruv
agdhruv

Reputation: 640

Why is the HTML table column width less that what is required?

I am using PHP echo to dynamically enter an change entries to an HTML table. But when I open the page containing the table, it sometimes loads perfectly, and other times it is rendered in a peculiar manner. What could be the problem here?

The problem with the table

Edit : here's my code.

HTML/PHP

<div class="my-table-container">
    <table>
            <tr>
                    <th>Rank</th>
                    <th>School Code</th>
                    <th>Level</th>
                    <th>Time Completed</th>
            </tr>
            <?php
                    $rank = 1;
                    for($x=0;$x<$no;$x++)
                    {
                        echo "<tr>";
                        echo "<td>".$rank."</td>";
                        echo "<td>".$arr[$x]['scl_name']."</td>";
                        echo "<td>".$arr[$x]['lvl']."</td>";
                        echo "<td>".$arr[$x]['tlc']."</td>";
                        echo "</tr>";
                        $rank++;
                    }
            ?>
    </table>
</div>

CSS

.my-table-container{
    background : #eaf7ee;
    border : 1px solid #c6d9ce;
    padding : 3%;
    padding-bottom : 2%;
    margin : 0px auto;
    flex-basis : 50%;
    text-align : center;
    margin-top: 4%;
    margin-bottom: 4%;
}

.my-table-container table{
    background-color: white;
    margin: 0px auto;
    border-collapse: collapse;
}

table,th,td{
    border : 1px solid black;
}

th,td{
    padding: 4%;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    text-align: center;
    vertical-align: middle;
}

Upvotes: 1

Views: 86

Answers (2)

Harshit Chaturvedi
Harshit Chaturvedi

Reputation: 13

.my-table-container{
    background : #eaf7ee;
    border : 1px solid #c6d9ce;
    padding : 3%;
    padding-bottom : 2%;
    margin : 0px auto;
    flex-basis : 50%;
    text-align : center;
    margin-top: 4%;
    margin-bottom: 4%;
}

.my-table-container table{
    background-color: white;
    margin: 0px auto;
    border-collapse: collapse;
}

table,th,td{
    border : 1px solid black;
}

th,td{
    padding: 4%;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    text-align: center;
    vertical-align: middle;
}
<div class="my-table-container" cellpadding="5">
    <table>
            <tr>
                    <th>Rank</th>
                    <th>School Code</th>
                    <th>Level</th>
                    <th>Time Completed</th>
            </tr>
            <?php
                    $rank = 1;
                    for($x=0;$x<$no;$x++)
                    {
                        echo "<tr>";
                        echo "<td>".$rank."</td>";
                        echo "<td>".$arr[$x]['scl_name']."</td>";
                        echo "<td>".$arr[$x]['lvl']."</td>";
                        echo "<td>".$arr[$x]['tlc']."</td>";
                        echo "</tr>";
                        $rank++;
                    }
            ?>
    </table>
</div>

i hope its working try to give a quick responce

Upvotes: 0

brianxautumn
brianxautumn

Reputation: 1162

add

white-space: nowrap;

either to the entire thing, or just the first row so that the headings don't get squished.

Also instead of % for padding, put a fixed number like 4px

Upvotes: 1

Related Questions