htmlcssword-spacing

Adjust spaces between text or words in html

I have a problem is how adjust spaces between text or words in html. I want my result 2 "colon" alignment can adjust same line.

Below is my sample code:

<tr><td style="font-size:11px;">Name :</td></tr><br>
<tr><td style="font-size:11px;">Date &nbsp;<span style="word-spacing:80px;">:</span></td></tr>

Now my result alignment cannot be same like:

result

I want the expected result is same like below:

result_2

I have try to use <p> to replace <span> adjust the alignment, but the "Colon" will break down. Hope someone can guide me on how to solve this problem. Thanks.

Solution

  • I had a similar problem and the only "hacky" way I found is this:
    "Put your text and separator (: in this case) in a wrapper (like <div>) and align them.

    .cell {
  display: flex;
  justify-content: space-between;
  width: 50px; /* just to see. you can use another value depending on your table styles */
}
    <tr>
  <td style="font-size:11px;">
    <div class="cell">Name <span>:</span></div>
  </td>
</tr>
<tr>
  <td style="font-size:11px;">
    <div class="cell">Date <span>:</span></div>
  </td>
</tr>

    Also, you don't need <br> between your table rows (<tr>s).