我有以下 html,其中错误表居中而不是在右侧。其他内容(不是(子)表)根据其类别正确对齐。
<table>
<tr>
<td class="r">a</td>
<td>b</td>
<td class="l">c</td>
</tr>
<tr>
<td class="r">
<table class="r" id="ERROR">
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
</table>
</td>
<td>h</td>
<td class="l">i</td>
</tr>
</table>
此CSS使用:
td.r {
text-align: right;
}
td.l{
text-align: left;
}
代码中遗漏了什么?我可以将一张 table 与另一张 table 对齐吗?谢谢
最佳答案
如果您将 display: inline-table
设置为内部表格,那么它将正确地适应您为表格单元格设置的文本对齐设置。
text-align 属性影响内联元素,而不影响 block 级元素。
table {
width: 100%;
}
table.inner {
display: inline-table;
width: auto;
border: 1px solid blue;
}
td {
border: 1px dotted gray;
}
td.r {
text-align: right;
}
td.l {
text-align: left;
}
<table>
<tr>
<td class="r">a</td>
<td>b</td>
<td class="l">c</td>
</tr>
<tr>
<td class="r">
<table class="inner" id="ERROR">
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
</table>
</td>
<td>h</td>
<td class="l">i</td>
</tr>
</table>
关于html - 在表格单元格内对齐表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29188021/