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

Question

我想文本是合理的

我尝试在td中放置text-align：justify，但它不起作用。 它总是显示为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;
}

我尝试为它添加许多样式，但我全部失败，例如：

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

我不明白为什么文本对齐证明不起作用。

Answer 1

您可以将理由添加到您为表格单元设置样式的相同位置：

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

虽然合理不会对单线人有任何影响。只有当它包装到下一行时，它才能证明除了最后一行之外的所有行。

在您的示例中，您的CSS将起作用，您只需将该类应用于每个表格单元格：

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

Answer 2

如果您希望td:first-child的文本占据整行，请尝试以下操作：
另外，您还应该删除在white-space:nowrap上拥有的.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>

您可以在这里ButtonRenderer

了解更多信息