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

有一个

html

表

：

<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>

---

在

列中

定义：

我将列的宽度硬编码为480px。那样做不太好！那么，如何使宽度动态地适应列的文本宽度呢？这里的文本是

-[/code>
，例如，您有一个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");
}

if（$（“#text”）.text（）.length如果希望
td
的宽度根据文本动态更改，则不应为
td
元素提供任何预定义的宽度

在示例中，您可以看到第一个
td
有一个长文本，因此同一列中的所有
td
将根据同一列中最长的
td
设置其宽度

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

使用
width:auto
。我一直在为我自己的目的（使用Bootstrap 3库）尝试解决这个问题，这对我来说很有效。
你对javascript JQueryAddMin width:280px；max width:480px；width:auto；inside.societe开放吗？但我不知道文本的宽度是否可以超过480！为什么要设置maxwidth？这是什么“列的文本宽度”？你是指单元格在一行上设置的文本内容，还是什么？我更喜欢的是不同的宽度。@pheromix，是的，这只是为了显示容器和其中的表。我只是说
td
元素及其
width
。
if($("#text").text().length<=100)
{
   $('.societe').attr("width", "480px");
}
if($("#text").text().length<=200)
{
   $('.societe').attr("width", "580px");
}