如何根据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"是：

.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" >我硬编码了列的宽度为480像素。这样做并不是很好！那么如何使宽度根据列文本的宽度动态调整？在这里，文本是<?php echo $_SESSION[PROJET_REF] ?> - [<?php echo $_SESSION[MANUEL_REF] ?>。

- pheromix

---

你是否接受使用 JavaScript 和 jQuery？ - COLD TOLD

在 .societe 中添加 min-width: 280px; max-width: 480px; width:auto; - Pramendra Gupta

但我不知道文本的宽度是否可以超过480！为什么要设置最大宽度？ - pheromix

“列的文本宽度”是什么意思？你是指将单元格的文本内容设置为一行时的宽度，还是其他的意思？ - Jukka K. Korpela

Answer 1

如果您希望您的td根据文本内容动态更改宽度，则不应为td元素指定任何预定义的宽度。

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

最终，这归结于用户体验。用户喜欢变化宽度的td还是喜欢具有相等尺寸的td，其中工具提示将显示完整文本（如果其长度大于td的宽度）。这是您需要做出的选择 :)

- Ashwin Krishnamurthy

---

我喜欢的是不同宽度。 - pheromix

@pheromix，是的，那只是为了向您展示容器和其中的表格。我只是在谈论td元素及其宽度。 - Ashwin Krishnamurthy

Answer 2

w3school使用width:auto。我一直在尝试为自己的目的找出解决方法（使用Bootstrap 3库），并且这对我有用。

- user2486953

Answer 3

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

根据您想要使用的措施，等等。

- COLD TOLD