w0n*_*s88 4 html css html-table center
我试图将每一行(<tr>)放在一个中心table.我有几行不均匀的数字.
这是我的HTML示例:
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
</table>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
目前输出如下所示:
但我希望它是这样的:
如果能够实现这一目标,我将非常高兴知道如何做到这一点.
带有常规标签的示例(相同结构)
div {
display:table;
border:solid 1px;
margin:auto;
}
p {
margin:0;
display:flex;
justify-content:center;
}
span {
margin:3px;
min-width:1em;
border:solid 1px;;
}Run Code Online (Sandbox Code Playgroud)
<div>
<p>
<span> 1 </span>
<span> 2 </span>
<span> 3 </span>
<span> 4 </span>
<span> 5 </span>
<span> 6 </span>
</p>
<p>
<span> 7 </span>
<span> 8 </span>
<span> 9 </span>
<span> 10 </span>
<span> 11</span>
</p>
</div>
Run Code Online (Sandbox Code Playgroud)
仅适用于INFOS.你的表的CSS将是:
tr {
display:flex;
justify-content:center;
}
td {
min-width:1.5em;
}
Run Code Online (Sandbox Code Playgroud)