Html 强制元素不水平拉伸表格单元格

我使用

display:table row

和

table cell

布局了一个表单，其中每行包含两个单元格：一个标签和一个输入。这两个单元格都有未指定的宽度，因为我希望它们与其中的内容一起拉伸

但是，在特定的单元格中，我需要添加一个包含额外信息的元素。不管里面的信息有多长，我都不想让它拉伸右边的单元格。我只想将文本包装为块设置了宽度，但没有设置宽度（因为我不知道它必须是什么）

.row{
显示：表格行；
外形：1px纯黑；
}
.细胞{
显示：表格单元格；
填充物：5px；
}
.info{
显示：块；
}

标签
另一个标签
此文本不应使单元格变大

好的，我相信这张桌子能满足你的要求

我想不出在什么情况下，事先选择一个任意宽度的

p

元素会是一个问题；如果您想要一个小于输入框（最小宽度）的元素，那么它没有问题，而且它不会改变大小

但是，如果您想添加一个比输入框大的描述元素（并且会增加单元格的宽度），或者您想添加内容，那么单元格还是会增加

我认为，如果不知道你将拥有的所有元素，就很难真正说出。在你的评论中也提到了单选按钮。我会为每种类型的输入设备（框、单选按钮、真/假选择、滑块、下拉框）添加不同的类，并为每种设备设置唯一的固定宽度

然而，在这一点上，它实际上可能更容易（更少的LOC）在JavaScript中完成。我不能在这里进行推测，因为我不太懂JavaScript

<table rules="rows">
    <tr>
        <td>This is a super long label to show that the table can grow.</td>
        <td class="right-col"><input/></td>
    </tr>
    <tr>
        <td>Another Label</td>
        <td class="right-col"><input/>Delete this text to see that non "p" description text will still make the table shrink or grow.<p>This is a fixed-width description with the same length as the input element above.</p></td>
    </tr>
    <tr>
        <td>A Third Label</td>
        <td class="right-col"><input type="radio"/>This text gets to expand the cell.<p>Another test example.</p></td>
    </tr>
</table>

灵感来源于，在内部使用另一个CSS表格布局，并假设您想要这样的结果

其思想是为您希望的零件使用表标题，其宽度仅与上面的项目相同。

.row{
显示：表格行；
外形：1px纯黑；
}
.细胞{
显示：表格单元格；
填充物：5px；
}
.info{
显示：表格标题；
标题侧：底部；
宽度：100%；
}

标签
另一个标签
广播嘎嘎
高氏电台
此文本不应使单元格变大-它在我使用IE11和FF32.0.2进行的测试中起作用。

简化

此文本不应使单元格变大

.info{
显示：表格；
宽度：100%；
}
.info内部{
显示：表格标题；
}

.row{
显示：表格行；
外形：1px纯黑；
}
.细胞{
显示：表格单元格；
填充物：5px；
}
.info{
显示：表格；
宽度：100%；
}
.info内部{
显示：表格标题；
}

标签
另一个标签
此文本不应使单元格变大

由于对实际需要固定宽度的特定不相关列的宽度进行了一些不相关的修补，我偶然发现了以下修复方法：

.input{
宽度：1px；
}

我完全忽略了这样一个事实，即在具有

display:table cell

的元素上，

width

属性的作用类似于

minwidth

在其他元素上的作用。因此，通过设置1像素的宽度，单元格始终缩小到所需的最小宽度。输入不能收缩，因此这是单元格所采用的最小大小，

.info

元素实际上被包装以适合单元格内部。这完全解决了我的问题，在一个简单的CSS规则

如果我想让一个元素现在推动单元格宽度，我可以简单地在它上面设置一个宽度，或者使用

空白：nowrap

不包装它（因此它只需要推动单元格边界）

.row{
显示：表格行；
外形：1px纯黑；
}
.细胞{
显示：表格单元格；
填充物：5px；
}
.input{
宽度：1px；
}
.info{
显示：块；
}

标签
另一个标签
此文本不应使单元格变大

为什么不使用表？@TylerH-为什么会有帮助？@LcSalazar如果他下定决心让它的行为和外观像一个表，那么实际上使用HTML表将允许内置控件和表行为，这是在使用CSS时必须伪造的。这是：看起来很有希望。@TylerH-首先，这里的问题不是让它的行为像一个表，已经有了。问题是别的。。。第二，不建议将HTML表格用于布局。

。右列p{width:150px；}

与我的代码段中的

完全相同。关键是我不能硬编码宽度，因为我并不总是确定输入的宽度。@StephanMuller为什么不让它们都是150px或200px或其他什么，然后如果需要，文本只会滚动？如果有一个更完整的例子来说明你想要实现的表单，这个问题会更好。这个例子就是解释我的问题所需要的最简单的例子。我可以包括我整个项目的代码，但这不会让你更聪明。我不知道右栏中的元素有多大，但我是开发人员，必须构建设计师给我的东西，他给了我这个。我在寻找最灵活、最容易维护的设计实现。@StephanMuller“一点也不聪明”好吧，我不同意，因为需要找到解决方案