Html 如何根据文本内容动态设置html表格列的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10974937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set dynamically the width of a html table column according to its text content?
提问by pheromix
There is a htmltable:
有一个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>
The css"societe" is :
该css“兴业”是：
.societe{
text-align:left;
padding-left:23px;
font-size:11px;
font-weight:bold;
background: url(../include/images/societe.png) repeat-x;
}
In the columndefinition : <td width="480px" class="societe" >I hard-coded the column's width to 480px. It's not very good to do that ! So how to make the width dynamically to fit with the column's text width ? Here the text is <?php echo $_SESSION[PROJET_REF] ?> - [<?php echo $_SESSION[MANUEL_REF] ?>.
在column定义中：<td width="480px" class="societe" >我将列的宽度硬编码为 480 像素。这样做不太好！那么如何动态地使宽度适应列的文本宽度呢？这里的文字是<?php echo $_SESSION[PROJET_REF] ?> - [<?php echo $_SESSION[MANUEL_REF] ?>。
采纳答案by Ashwin Krishnamurthy
If you want the width of your tdto change dynamically according to your text, then you shouldn't give any predefined width for the tdelement.
如果您希望td根据文本动态更改宽度，则不应为td元素提供任何预定义的宽度。
In thisexample, you can see that the first tdhas a long text, So all td's within the same column will have their width set according to the longest tdin the same column.
在这个例子中，你可以看到第一个td有一个长文本，所以td同一列中的所有's 将根据td同一列中最长的宽度设置它们的宽度。
In the end, it boils down to the user experience. Would the user prefer td's with varying widths or would the user prefer td's with equal dimensions where a tool-tip would show the complete text in case it's larger in length than the width of the td. That, my friend, is a choice you'll have to make :)
最后，归结为用户体验。用户更喜欢td's 具有不同的宽度，还是用户更喜欢td具有相同尺寸的 's ，其中工具提示将显示完整的文本，以防它的长度大于td. 我的朋友，那是你必须做出的选择:)
回答by COLD TOLD
so for instance you have a div
所以例如你有一个 div
<div id="text" style="float:left;font-size:12px;padding-top:2px" ><?php echo $_SESSION[PROJET_REF] ?> - [<?php echo $_SESSION[MANUEL_REF] ?>]</div>
you now gone get the value of characters int and depending how many there are you add a specific with
你现在已经得到了字符 int 的值，并取决于有多少你添加了一个特定的
if($("#text").text().length<=100)
{
$('.societe').attr("width", "480px");
}
if($("#text").text().length<=200)
{
$('.societe').attr("width", "580px");
}
and so on depending on what measures you want to use
依此类推，具体取决于您要使用的措施
