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

【问题标题】：How to set dynamically the width of a html table column according to its text content?如何根据文本内容动态设置html表格列的宽度？
【发布时间】：2023-03-10 22:16:01
【问题描述】：

有一个htmltable：

<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] ?>。

【问题讨论】：

你对javascript jquery开放吗
添加最小宽度：280px；最大宽度：480px；宽度：自动；在.societe里面
但是不知道文字的宽度能不能超过480！为什么要这么设置maxwidth？
什么是“列的文本宽度”？您是指设置在一行上的单元格的文本内容，还是什么？

标签： html css xhtml pixel font-size

【解决方案1】：

所以例如你有一个 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");
}

等等，取决于你想使用什么措施

【讨论】：

【解决方案2】：

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

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

归根结底，它归结为用户体验。用户会更喜欢具有不同宽度的td，还是更喜欢具有相同尺寸的td，其中工具提示将显示完整的文本，以防它的长度大于td 的宽度。我的朋友，这是你必须做出的选择:)

【讨论】：

我更喜欢不同的宽度。
@pheromix，是的，这只是为了向您展示容器和其中的表格。我只是在谈论td 元素及其width。

【解决方案3】：

w3school 使用width:auto。我一直在尝试为自己的目的（使用 Bootstrap 3 库）弄清楚它，这对我有用。

【讨论】：