HTML table with fixed cells size

Question

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 !

Answer 1

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.

Answer 2

确保为表格及其单元格和行分配width和height以像素为单位，而不是百分比）。

Answer 3

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>