Adjust spaces between text or words in html-CodePudding

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:

I want the expected result is same like below:

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.

CodePudding user response：

As the colon is for visual separation rather than having any meaning I would consider inserting it in a pseudo element rather than actually in the HTML.

This snippet puts the colon in just before the following td which ensures the colons are aligned.

td:nth-child(2)::before {
  content: ':';
}

<table>
  <tr>
    <td style="font-size:11px;">Name </td>
    <td></td>
  </tr><br>
  <tr>
    <td style="font-size:11px;">Date</td>
    <td></td>
  </tr>
</table>

CodePudding user response：

The easiest way to accomplish that is to put the colon at the beginning of the 'text', instead of the end of the 'title'.

/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td> : John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td> : Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td> : Data</td>
  </tr>
</table>

If you need to omit it when the 'text' is empty, you can output the colon as a td::before using CSS.

/* This is relevant */

td:not(:empty)::before {
  content: " : ";
}


/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td>Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td></td>
  </tr>
</table>

CodePudding user response：

Here I have updated your sample code put the : in second td

<body>
    <table>
      <tr>
        <td>Full Name</td>
        <td>: Abc def</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>: 24-11-2021</td>
      </tr>
    </table>
  </body>

CodePudding user response：

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

CodePudding user response：

If its about a single word followed by a :, text-align-last:justify; can do the job

td.adjust {
  text-align-last: justify;
  padding-inline-end:0.25rem;
}

<table>
  <tr>
    <td class="adjust">Name :</td>
    <td>Name </td>
  </tr><br>
  <tr>
    <td class="adjust">Date :</td>
    <td>Today</td>
  </tr>
</table>