CODEWITHSUNDEEP
html
Misha Moroshko
Misha Moroshko

Reputation: 171509

HTML table with fixed cells size

I have an HTML table which has equally divided rows and columns. I would like each cell to be of a fixed size, say 40px width and 30px height. When I change the size of the browser window, the cells size changes also. How can I prevent it ? I would expect to see the scroll bars if browser's window become too small. Is that right to set the height and the width of the cell in pixels ? Thanks !

Upvotes: 0

Views: 2763

Answers (3)

Abdurrahman Hafez
Abdurrahman Hafez

Reputation: 306

It worked with me in (9X9) tic-tac-toe

https://codepen.io/abHafez/pen/WZaeXW

I just specified height and width for the table itself and for the <td> element.

table {
    table-layout:fixed;
    width: 350px;
    height: 350px;
    font-size: 4rem;
}

tr {
    max-height: 15px;
}

td {
    background-color: #78c0c4;
    border: white solid 1rem;
    text-align: center;
    /* position: relative; */
    width: 114px;
    height: 114px;
}
<table>
                <tr class="row1">
                    <td class="pos1"></td>
                    <td class="pos2"></td>
                    <td class="pos3"></td>
                </tr>
                <tr class="row2">
                    <td class="pos4"></td>
                    <td class="pos5"></td>
                    <td class="pos6"></td>
                </tr>
                <tr class="row3">
                    <td class="pos7"></td>
                    <td class="pos8"></td>
                    <td class="pos9"></td>
                </tr>
</table>

Upvotes: 0

Guffa
Guffa

Reputation: 700910

You have to specify the size of the table to prevent it from being adjusted to fit the page.

When you specify the size of the cells that is just a minimum size, they will get larger if the table is larger. Also, if you have specified the size for all cells, and the table is smaller than the sum of the cell sizes, the cells will have to get smaller than specified.

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382919

Make sure that you are assigning width and height in pixels rather than percentage to the table as well as its cells and rows.

Upvotes: 0

Related Questions