jordanc jordanc -4 years ago 76
CSS Question

Table of tables HTML CSS

I am making a webpage which will involve having 9 tables in a 3x3 formation on screen.

So far I have the 9 tables on top of each other, but I would like them set up kind of like a tic tac toe board in the centre of the screen, and I am going to fill them all differently. Any suggestion? I have given them all the same ID, and individual classes if that helps..

PS please don't suggest that I just make different cells - it is important that they are different tables!

html:

<table id='table' class="table1">
<tr>
</tr>
</table>
<table id='table' class="table2">
<tr>
</tr>
</table>
<table id='table' class="table3">
<tr>
</tr>
</table>
<table id='table' class="table4">
<tr>
</tr>
</table>
<table id='table' class="table5">
<tr>
</tr>
</table>
<table id='table' class="table6">
<tr>
</tr>
</table>
<table id='table' class="table7">
<tr>
</tr>
</table>
<table id='table' class="table8">
<tr>
</tr>
</table>
<table id='table' class="table9">
<tr>
</tr>
</table>


css:

#table {
padding: 0px;
margin: 0 auto;
outline-color: red;
outline-style: solid;
width: 80px;
height: 80px;
}

Answer Source

Wrap them in a div and have them like the following:

.table { 
    font-size:14px;
    display:inline-table;
    padding: 0px; 
    margin: 0 auto;
    outline-color: red;
    outline-style: solid;
    width: 80px;
    height: 80px;
}
div{
  width:248px;
  font-size:0;
}
<div>
<table class="table">
    <tr>
    </tr>
</table>
<table class="table">
    <tr>
    </tr>
</table>
<table  class="table">
    <tr>
    </tr>
</table>
<table class="table">
    <tr>
    </tr>
</table>
<table class="table">
    <tr>
    </tr>
</table>
<table class="table">
    <tr>
    </tr>
</table>
<table class="table">
    <tr>
    </tr>
</table>
<table class="table">
    <tr>
    </tr>
</table>
<table  class="table">
    <tr>
    </tr>
</table>
</div>

https://jsfiddle.net/q1vcwppa/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download