如何将 html 列宽固定为其内容的最大宽度?

Posted

技术标签:

【中文标题】如何将 html 列宽固定为其内容的最大宽度?【英文标题】:How to fix an html column width to the max width of its content? 【发布时间】:2011-11-08 01:45:54 【问题描述】:

我正在尝试为输入表单格式化表格,如下所示。表格看起来有点像这样:

       Name:
Time of day:

以此类推,其中每个字段标签后面跟着输入字段。 我的目标是有一个包含两列的表,一列用于字段标签,另一列用于输入字段,这样:

左列的大小由最长的字段标签自动确定,因此字段标签永远不会被环绕。 输入字段本身尽可能向右延伸。

我当然知道我可以将左列固定为例如20em 长,另一列 100%,但这不是我要问的——我不想测量然后输入像 20em 这样的固定宽度;我希望从该列中最长项目的宽度自动得出宽度。这听起来像是一个相当普遍的愿望。有没有办法简单地做到这一点?

【问题讨论】:

欢迎来到 Stack Overflow!如果您的问题的任何答案有帮助,请单击向上箭头,鼓励他们给他们一个支持。当您的问题得到解答后,请点击相应答案旁边的复选标记,将相应答案标记为“正确”。 【参考方案1】:

使用white-space: nowrap; CSS 样式,如下面的代码所示。当然,您需要在两列之间添加边距或填充,这样冒号 (:) 就不会被压在输入框上。 jsFiddle example of the code below

html

<table class="fullWidth">
    <tr>
        <td class="nowrap">Name:</td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td class="nowrap">Time of Day:</td>
        <td><input type="text" /></td>
    </tr>
</table>

CSS:

.nowrap 
    white-space: nowrap;  
    width: 1px;


.fullWidth 
    width: 100%;


input 
    width: 100%;
    display: block;   

【讨论】:

以上是关于如何将 html 列宽固定为其内容的最大宽度?的主要内容,如果未能解决你的问题,请参考以下文章

HTML表格列宽实践

css中table列宽怎样动态设置

如何使用类似表格的 DataTemplate 在 UWP ListView 中动态缩放列宽

具有固定列宽和最大高度的 CSS 表格

HTML 表格 - 固定和多变量列宽

如何将最大宽度设置为百分比或静态值