表格table表里td内容两端对齐

最新推荐文章于 2023-12-11 15:24:24 发布

原创最新推荐文章于 2023-12-11 15:24:24 发布 · 2.8k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文是新手学习记录，分享了如何在HTML表格中实现TD元素的两端对齐。通过设置CSS样式text-align:justify, text-justify:distribute-all-lines, text-align-last:justify，可以达到两端对齐的效果。示例代码展示了具体应用。

本人新手菜鸡，该文章仅为自己的学习问题记录，如有不足望大佬指正。

td两端对齐的方法：

在td中加入以下style样式即可实现两端对齐：

<style>
     td{
        border:1px solid red;
        text-align:center;
        text-align:justify;
        text-justify:distribute-all-lines;
        text-align-last:justify
     }
</style>

示例代码：

<table border="1">
  <tr>
    <th>测试</th>
    <th>两端对齐</th>
  </tr>
  <tr>
    <td width="160px" style="text-align:justify;text-justify:distribute-all-lines;text-align-last:justify" >大家好</td>
    <td width="160px" style="text-align:justify;text-justify:distribute-all-lines;text-align-last:justify" >我是两端对齐</td>
  </tr>
</table>