不同字数的文字能左右对齐占满两边

这篇博客介绍了如何使用CSS和JavaScript使表格单元格中的文字左右对齐,并根据文字长度动态调整字母间距,以使文字占满单元格的宽度。示例中展示了针对多个单元格设置对齐和间距的方法。

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

<style type="text/css">
     td { font-size: 12px; }
</style>

<table id="oTable" border="0" cellspacing="0" cellpadding="0">
<tr><td id="id1">北京市教育局</td></tr>
<tr><td id="id2">北京市政府纠风办</td></tr>
<tr><td id="id3">北京市文化广电新闻出版局</td></tr>
<tr><td id="id4">北京市物价局</td></tr>
</table>

<script type="text/javascript">
      onload = function() {
            //var wTable = $('oTable').clientWidth;
            //alert(wTable);
          
            /*for (var i = 0; i < $('oTable').rows.length; i ++) {
                  for (var j = 0; j < $('oTable').rows[i].cells.length; j ++) {
                        var cellobj = $('oTable').rows[i].cells[j];
                        var length = cellobj.innerText.length;
                        var wFont = parseInt(cellobj.currentStyle.fontSize);
                        var space = (wTable / wFont - length) / (length - 1);
                        //cellobj.style.letterSpacing = space + 'em';                     
                  }                 
                 
                
            } */        
             test(); 
            function $(_id) { return document.getElementById(_id); }
      }
     
      function test(){
 
         var wTable = 200;
            var cellobj1 = $('id1');
 
            var length = cellobj1.innerText.length;
            var wFont = parseInt(cellobj1.currentStyle.fontSize);
            var space = (wTable / wFont - length) / (length - 1);
            cellobj1.style.letterSpacing = space + 'em';   
           
            var cellobj2 = $('id2');
            var length = cellobj2.innerText.length;
            var wFont = parseInt(cellobj2.currentStyle.fontSize);
            var space = (wTable / wFont - length) / (length - 1);
            cellobj2.style.letterSpacing = space + 'em';   
           
            var cellobj3 = $('id3');
            var length = cellobj3.innerText.length;
            var wFont = parseInt(cellobj3.currentStyle.fontSize);
            var space = (wTable / wFont - length) / (length - 1);
            cellobj3.style.letterSpacing = space + 'em';   
           
            var cellobj4 = $('id4');
            var length = cellobj4.innerText.length;
            var wFont = parseInt(cellobj4.currentStyle.fontSize);
            var space = (wTable / wFont - length) / (length - 1);
            cellobj4.style.letterSpacing = space + 'em';   
           
            function $(_id) { return document.getElementById(_id); }
      }
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值