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" >我将列的宽度硬编码为480px。这样做并不是很好！那么如何动态调整宽度以适应列的文本宽度？这里的文字是<?php echo $_SESSION[PROJET_REF] ?> - [<?php echo $_SESSION[MANUEL_REF] ?>。

Answer 1

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

在 this 示例中，您可以看到第一个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库）来解决它，这对我有用。

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

3 个答案: