对齐表格单元格中的表格

时间:2015-03-21 21:03:31

标签: html css

我有以下html,其中ERROR表不在右侧居中。其他内容(不是(子)表)根据其类别正确对齐。

<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;
}

代码中缺少某些内容?我可以将一张桌子对齐吗?感谢

2 个答案:

答案 0 :(得分:1)

如果您将display: inline-table设置为内部表格,那么它将适用于您为表格单元格设置的文本对齐设置。

text-align属性影响内联元素,而不影响块级元素。

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

如果你想修改一个类,请在css中尝试将其标记为.classname,就像id #idname一样,所以在你的情况下尝试将你的td.r更改为{{1}和.rtd.l