原生js实现表格内容的居中左对齐

最新推荐文章于 2024-08-28 22:07:19 发布

逍遥的码农

最新推荐文章于 2024-08-28 22:07:19 发布

阅读量3.6k

点赞数 1

分类专栏： js专栏文章标签： javascript css3 css

本文链接：https://blog.youkuaiyun.com/weixin_48171107/article/details/122363153

版权

js专栏专栏收录该内容

32 篇文章

订阅专栏

这个示例代码展示了如何使用HTML和JavaScript实现表格中的文字居中且内容左对齐。通过获取每个单元格的宽度和内部span元素的宽度，计算出合适的内边距，使文字既能居中又能保持左对齐。代码适用于动态调整表格布局的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果
在这里插入图片描述

以下是试例代码

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>表格文字居中并左对齐</title>
  </head>
  <body>
    <table
      style="margin: 0 auto"
      width="300"
      cellspacing="0"
      cellpadding="0"
      width="100%"
      border="1"
    >
      <tr>
        <th>Month</th>
      </tr>
      <tr>
        <td class="left"><span>5.63s⬆️</span></td>
      </tr>
      <tr>
        <td class="left"><span>5.63s⬆️</span></td>
      </tr>
      <tr>
        <td class="left"><span>5.63s⬆️</span></td>
      </tr>
      <tr>
        <td class="left"><span>1.76s⬆️</span></td>
      </tr>
      <tr>
        <td class="left"><span>7.0cpm⬆️</span></td>
      </tr>
      <tr>
        <td class="left"><span>10.5cpm⬆️</span></td>
      </tr>
      <tr>
        <td class="left"><span>29.1%</span></td>
      </tr>
      <tr>
        <td class="left"><span>29.1%⬆️</span></td>
      </tr>
      <tr>
        <td class="left"><span>29.1%</span></td>
      </tr>
      <tr>
        <td class="left"><span>29.1%⬆</span></td>
      </tr>
      <tr>
        <td class="left"><span>29.1%⬆️</span></td>
      </tr>
      <tr>
        <td class="left"><span>29.1%</span></td>
      </tr>
      <tr>
        <td class="left"><span>29.1%⬆️</span></td>
      </tr>
    </table>
  </body>
</html>
<script>
  let td = document.getElementsByClassName("left");
  var left;
  var arr = [];
  for (let i = 0; i < td.length; i++) {
    left = parseInt(getComputedStyle(td[i]).width); //获取td表格的宽度
    let span = td[i].firstChild; //获取td包裹的span标签
    let spanWidth = parseInt(span.offsetWidth); //获取span文字的宽度
    arr.push(spanWidth);
  }

  for (let j = 0; j < td.length; j++) {
    td[j].style.width = left + "px"; //td标签保持第一次获取的宽度，pandding会影响标签宽度
    td[j].style.paddingLeft = left / 2 - Math.max(...arr) / 2 + "px"; //td标签的宽度除以2 - 所有span标签中最大的宽度 让所有的td标签都left这么多px 实现居中左对齐
  }
</script>