8

有一个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] ?>。

4

3 回答 3

5

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

在这个例子中，你可以看到第一个td有一个长文本，所以同一列中的所有td' 将根据td同一列中的最长设置它们的宽度。

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

于 2012-06-11T05:54:01.087 回答
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");
}

依此类推，具体取决于您要使用的措施

于 2012-06-11T05:52:58.297 回答
0

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

于 2013-12-22T00:42:53.427 回答