나는 문제는 어떻게 조정할 사이에 공백을 텍스트 또는 단어에서 html. 내 결과 2"colon"맞춤 조정할 수 있습니다.
아래에 나의 예제 코드는 다음과 같습니다:
<tr><td style="font-size:11px;">Name :</td></tr><br>
<tr><td style="font-size:11px;">Date <span style="word-spacing:80px;">:</span></td></tr>지금 결과를 정렬할 수 없습 같은 다음과 같:
내가 원하는 예상된 결과 같은 아래와 같다:
내가 사용하려고 <p> 대체 <span> 조정형,그러나"Colon"것입니다. 희망은 누군가가 나를 안내 수 있는 방법에 대해 이 문제를 해결합니다. 감사합니다.
로 콜론에 대한 시각 분리 보다는 오히려 어떤 의미가 나는 것을 고려에 삽입 의사의 요소보다는 실제로에서 HTML.
이 코드 조각을 넣은 결장에서 전에 다음 td 을 보장하는 콜론을 정렬한다.
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>나는 비슷한 문제가 있었고"해키는 방법"내가 찾는다:
"넣어 텍스트 및 분리기(: 이 경우)에서 래퍼(아 <div>다)및 그들을 정렬.
.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>또한,당신은 필요가 없 <br> 사이 행 테이블(<tr>s).
여기에 내가 업데이트한 샘플 코드를 넣어 : 에서 두 번째 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>가장 쉬운 방법으로 수행하는 것은 결장에서의 시작 '텍스트',종료 대신에'제목'.
/* 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>필요하신 경우에는 생략하고 있을 때'텍스트'는 빈,출력할 수 있습니다 콜론으로 td::before 사용 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>는 경우에 대해 하나의 단어 뒤에 :, text-align-last:justify; 일을 할 수 있습니다
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>