CODEWITHSUNDEEP
htmlcss
dblanco
dblanco

Reputation: 285

Align table within a table cell

I have the following html, where the ERROR table is centered not on the right. The other content, which is not a (sub) table is aligned correctly according to their class.

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

This css use:

td.r {
    text-align: right;
}
td.l{
    text-align: left;
}

Missing something in the code? I can align a table inside another? Thanks

Upvotes: 2

Views: 2114

Answers (2)

Drake
Drake

Reputation: 1

in the css when you want to modify a class try to mark it as .classname much like how id is #idname so in your case try changing your td.r to just .r and your td.l to just .l

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

If you set display: inline-table to your inner table, then it will behave properly to the text align settings that you set for the table cells.

The text-align property affects inline elements, not block level elements.

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>

Upvotes: 3

Related Questions