文本对齐：证明在表格 td 中不起作用

Question

I would like some text to be justified.

I tried to put text-align: justify in the td, but it doesn't work. It always shows like text-align: left

HTML:

<div class="pha-wrapperTAB">
  <table class="pha-contentTAB">
    <tbody>
      <tr>
        <td>농     정     과</td>
        <td>063-454-2830</td>
      </tr>
      <tr>
        <td>농 촌 지   원 과</td>
        <td>063-454-5225</td>
      </tr>
      <tr>
        <td>기  술 보  급 과</td>
        <td>063-454-5302</td>
      </tr>
      <tr>
        <td>농산 물 유  통과</td>
        <td>063-454-3013</td>
      </tr>
      <tr>
        <td>농기계임대사업소</td>
        <td>063-454-5248</td>
      </tr>
      <tr>
        <td>농산 물가 공센터</td>
        <td>063-454-5257</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

.pha-contentTAB tr td {
  white-space: nowrap;
}
.pha-contentTAB tr td:nth-child(1) {

}
.pha-contentTAB{
  width:100%;
}
.pha-contentTAB tr td:first-child{
  width:55%;
  text-align: justify;
}
.pha-contentTAB tr td:last-child{
  font-weight:bold;
  font-size:15px;
  line-height:15px;
}
.pha-wrapperTAB{
  display:inline-block;
  width: 100%;
  padding: 0 5px 0 5px;
}
.pha-contentTAB td{
  border-bottom: 0px dotted #E4E4E4;
  line-height:20px;
  float:left;
  width:45%;
  font-size:14px;
  padding:2px 0;
  vertical-align: middle;
}

I tried to add many styles for it but I fail all, such as:

.fulljustify {
   text-align:justify;
 }
.fulljustify:after {
   content: "";
   display: inline-block;
   width: 100%;    
}

I don't understand why text-align justify doesn't work.

Answer 1

You would add the justification to the same place you're styling the table cells:

.pha-contentTAB td {
    text-align:justify;
}

Though justify will not have any effect on one-liners. Only when it wraps to the next line, does it justify all lines except the last.

In your example, your CSS will work, and you need only to apply the class to each of the table cells:

<td class="fulljustify">...</td>

Answer 2

Try this if you want the td:first-child 's text occupies the whole line:
Also you should remove white-space:nowrap that you have on .pha-contentTAB tr td

 .pha-contentTAB tr td { /* white-space: nowrap; */ } .pha-contentTAB tr td:nth-child(1) { } .pha-contentTAB{ /* width:100%; */ } .pha-contentTAB tr > td:first-child{ /* width:55%; */ background-color: #CC0; text-align: justify; } .pha-contentTAB tr td:last-child{ font-weight:bold; font-size:15px; line-height:15px; } .pha-wrapperTAB{ display:inline-block; /* width: 100%; */ padding: 0 5px 0 5px; } .pha-contentTAB td{ border-bottom: 0px dotted #E4E4E4; line-height:20px; /* float:left; */ /* width:45%; */ font-size:14px; padding:2px 0; vertical-align: middle; } td:first-child::after { content: ""; display: inline-block; width: 100%; background-color: #CC0; }

 <div class="pha-wrapperTAB"> <table class="pha-contentTAB"> <tbody> <tr> <td>농 정 과</td> <td>063-454-2830</td> </tr> <tr> <td>농 촌 지 원 과</td> <td>063-454-5225</td> </tr> <tr> <td>기 술 보 급 과</td> <td>063-454-5302</td> </tr> <tr> <td>농산 물 유 통과</td> <td>063-454-3013</td> </tr> <tr> <td>농기계임대사업소</td> <td>063-454-5248</td> </tr> <tr> <td>농산 물가 공센터</td> <td>063-454-5257</td> </tr> </tbody> </table> </div>

you may what to read more about it here how-to-make-text-take-full-width-of-its-container