如何根據文本內容動態設置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元素提供任何預定義的寬度。

在此示例中，您可以看到第一個td有一個長文本，因此同一列中的所有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 庫）來解決這個問題，這對我有用。