I'm currently developing a board game in JavaScript, and I have stored the images for the board within a table structure. Initially, I used HTML <table> tags for this purpose. However, I later realized that since the table doesn't contain data per se, it would be more appropriate to utilize <div> elements to visually represent it.
<div id='board'>
<!-- the table starts here -->
<div class='mytable'>
<!-- table has multiple rows -->
<div class='myrow'>
<!-- a row has multiple cells -->
<div class='mycell'/>
...
</div>
...
</div>
</div>
To style these divs in a way similar to a traditional table, I've applied the following CSS properties.
.mytable{
display:table;
width:auto;
border:0px;
border-spacing:0px;
padding: 0px;
border-collapse: collapse;
table-layout:fixed;
}
.myrow{
display:table-row;
width:auto;
height: auto;
clear:both;
}
.mycell{
float:left;/*fix for buggy browsers*/
text-align: center;
display:table-cell;
width:31px;
height:31px;
background: url(background.png) no-repeat;
}
Initially, everything appears to work perfectly. However, when the table size exceeds the screen dimensions, the cells start wrapping around to the next line. This typically occurs when resizing the browser window.
My desired outcome is for the cells to remain in their original positions and extend beyond the visible area of the web browser, or ideally placed within a fixed-size container with scroll bars appearing when needed.
I attempted setting a fixed width (e.g. width: 200px) for the parent node (div#board). Unfortunately, this approach only works if the set width is larger than the table (div.mytable), which may vary in size.
Here are some strategies I tried:
overflow: scrollwas ineffective.white-space: nowrapdid not yield the desired result.- Experimenting with
table-layout: fixed, yet no noticeable change occurred. - Considered using
display: table-columninstead ofdisplay: table-cell.
What could I possibly be overlooking?