gpt4 book ai didi

html - 表格表格 HTML CSS

转载 作者:行者123 更新时间:2023-11-28 04:16:00 26 4
gpt4 key购买 nike

我正在制作一个网页,该网页将在屏幕上以 3x3 的形式显示 9 个表格。

到目前为止,我已经将 9 个 table 放在一起,但我希望它们在屏幕中央设置得有点像井字棋盘,我将以不同的方式填充它们。有什么建议吗?如果有帮助的话,我给了他们所有相同的 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;
}

最佳答案

将它们包裹在一个 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/

关于html - 表格表格 HTML CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42477349/

26 4 0
文章推荐: c++ - Visual Studio 中生成的匿名命名空间变量的损坏名称的数字部分是什么意思?
文章推荐: html - 如何在
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com