如何根据其文本内容动态设置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的宽度，工具提示将显示完整的文本。我的朋友，这是您必须做出的选择：）

Answer 2

例如，您有一个div

<div  id="text" style="float:left;font-size:12px;padding-top:2px" ><?php echo $_SESSION[PROJET_REF] ?> - [<?php echo $_SESSION[MANUEL_REF] ?>]</div>

您现在获得了字符int的值，并取决于要添加多少个字符，并带有

if($("#text").text().length<=100)
{
   $('.societe').attr("width", "480px");
}
if($("#text").text().length<=200)
{
   $('.societe').attr("width", "580px");
}

依您要使用的措施而定，依此类推>>

Answer 3

w3school使用width:auto。我一直在尝试出于自己的目的（使用Bootstrap 3库）对我有用。