html - 如何根据文本内容动态设置html表格列的宽度？

Question

有一个html table :

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="480px"  class="societe" ><div style="float:left;font-size:12px;padding-top:2px" ><?php echo $_SESSION[PROJET_REF] ?> - [<?php echo $_SESSION[MANUEL_REF] ?>]</div>
      </td>
   </tr>
   ...
</table>

css “社会”是:

.societe{

    text-align:left;
    padding-left:23px;
    font-size:11px;
    font-weight:bold;

    background: url(../include/images/societe.png) repeat-x;

    }

在column定义:<td width="480px" class="societe" >我将列的宽度硬编码为 480px。这样做不太好!那么如何使宽度动态地适应列的文本宽度呢？这里的文字是<?php echo $_SESSION[PROJET_REF] ?> - [<?php echo $_SESSION[MANUEL_REF] ?> .

Answer 1

如果您希望 td 的宽度根据您的文本动态变化，那么您不应该为 td 元素提供任何预定义的宽度。

在 this 例子，你可以看到第一个td 有一个长文本，所以同一列中的所有td 的宽度将根据最长的设置td 在同一列。

最后，它归结为用户体验。用户会更喜欢宽度不同的 td 还是用户会更喜欢尺寸相同的 td，如果它更大，工具提示会显示完整的文本长度大于 td 的宽度。我的 friend ，这是你必须做出的选择:)