Search code examples
htmlcsshtml-tableright-align

float: right in inline css of td

My result and expectation in the image below: enter image description here

for that I tried:

<table>
  <tr>
    <td>Name:-</td>
    <td><strong>XYZ</strong></td>
    <span style="float: right;">
     <td>Age:-</td>
     <td><strong>38</strong></td>
   </span>
  </tr>
</table>

My result and expectation in the image below: enter image description here

Solution

  • You can do that by using the default table layout mode and expanding the second table cell.

    Because the table layout mode is set to auto, even if we expand one cell to the width of the table, the layout will expand that cell to take as much space as possible.

    table {
  width: 100%; /* <-- only this is necassery for this effect */
  padding: 0.5em;
  background: lightgrey;
}

.expand {
  width: 100%;
}
    <table>
  <tr>
    <td>Name:-</td>
    <td class="expand"><strong>XYZ</strong></td>
    <td>Age:-</td>
    <td><strong>38</strong></td>
  </tr>
</table>

    The same effect can be achieved by adding an empty cell and expanding it:

    <table>
  <tr>
    <td>Name:-</td>
    <td><strong>XYZ</strong></td>
    <td class="expand"></td>
    <td>Age:-</td>
    <td><strong>38</strong></td>
  </tr>
</table>