使行内 table 间距与页面成比例
Make inline table spacing proportionate to page
有没有办法让多个表格在页面上以等间距排列?
这是我希望我的页面的样子:
<table class="auto-style4" border="0" cellspacing="0">
<tr>
<td style="width:7%" align="right">table 1, cell 1</td>
<td style="width:7%" >table 1, cell 2</td>
<td style="width:7%" align="right">TABLE 2, CELL 1</td>
<td style="width:7%" >TABLE 2, CELL 2</td>
</tr>
</table>
https://www.w3schools.com/code/tryit.asp?filename=FLDD6QZ6DCV0
但我的问题是,由于页面与网站其他部分的交互方式,我需要将它们作为单独的表格。
这是我能够用单独的表复制它的最接近结果:https://www.w3schools.com/code/tryit.asp?filename=FLDD5NFMYBL7
但问题是它将两列居中放置在页面中间,而不是像第一个示例那样在页面上将它们均匀隔开(这正是我想要的。)
所以,我的问题是:一般来说,有没有办法像第一个示例那样制作在页面上均匀分布的单独内联表?
谢谢!
这是您想要实现的目标吗?如果是,那么我会添加一些解释。
table{
display:inline-block;
margin: 0 10px;
border:1px solid #000;
}
.container{
display:flex;
align-items:center;
justify-content:space-around;
}
<div class="container">
<table>
<tr>
<td>Table 1 Item 1</td>
<td>Table 1 Item 2</td>
<td>Table 1 Item 3</td>
<td>Table 1 Item 4</td>
</tr>
</table>
<table>
<tr>
<td>Table 2 Item 1</td>
<td>Table 2 Item 2</td>
<td>Table 2 Item 3</td>
<td>Table 2 Item 4</td>
</tr>
</table>
</div>
有没有办法让多个表格在页面上以等间距排列?
这是我希望我的页面的样子:
<table class="auto-style4" border="0" cellspacing="0">
<tr>
<td style="width:7%" align="right">table 1, cell 1</td>
<td style="width:7%" >table 1, cell 2</td>
<td style="width:7%" align="right">TABLE 2, CELL 1</td>
<td style="width:7%" >TABLE 2, CELL 2</td>
</tr>
</table>
https://www.w3schools.com/code/tryit.asp?filename=FLDD6QZ6DCV0
但我的问题是,由于页面与网站其他部分的交互方式,我需要将它们作为单独的表格。
这是我能够用单独的表复制它的最接近结果:https://www.w3schools.com/code/tryit.asp?filename=FLDD5NFMYBL7
但问题是它将两列居中放置在页面中间,而不是像第一个示例那样在页面上将它们均匀隔开(这正是我想要的。)
所以,我的问题是:一般来说,有没有办法像第一个示例那样制作在页面上均匀分布的单独内联表?
谢谢!
这是您想要实现的目标吗?如果是,那么我会添加一些解释。
table{
display:inline-block;
margin: 0 10px;
border:1px solid #000;
}
.container{
display:flex;
align-items:center;
justify-content:space-around;
}
<div class="container">
<table>
<tr>
<td>Table 1 Item 1</td>
<td>Table 1 Item 2</td>
<td>Table 1 Item 3</td>
<td>Table 1 Item 4</td>
</tr>
</table>
<table>
<tr>
<td>Table 2 Item 1</td>
<td>Table 2 Item 2</td>
<td>Table 2 Item 3</td>
<td>Table 2 Item 4</td>
</tr>
</table>
</div>