Table of tables HTML CSS

Question

我正在制作一个网页，该网页将涉及在屏幕上的3x3编队中有9个表。

到目前为止，我彼此之间有9个桌子，但是我希望它们像屏幕中央的Tic Tac Tac板一样设置，我会以不同的方式填充它们。有建议吗？我给了他们所有相同的ID，如果有帮助的话。

ps请不要建议我只是制作不同的单元格 - 重要的是它们是不同的桌子！

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 1

将它们包裹在DIV中，并将它们如下：

.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/

Answer 2

这是使用width和float属性想到的第一种方法。可以肯定的是，您还可以在Flexbox中做些事情来制作它，以使桌子保持相同的高度，但是我最大的建议是您真的不应该这样做，但是在没有更多了解的情况下，我不能特别给您更多的理由。

table.table {
  width: 33%;
  float: left;
  min-height: 100px;
  min-width: 100px;
  border: 1px solid orange;
}

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

Answer 3

或尝试！

 <div>
<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>
</div>

div{
width:250px;
margin: 0 auto;
}
#table { 
padding: 0px; 
margin: 0 auto;
outline-color: red;
outline-style: solid;
width: 80px;
height: 80px;
display:inline-block;
}
.table1{
background-color:blue;
}
 .table2{
background-color:green;
}
.table3{
background-color:orange;