CSS“表格布局:固定”以及根据内部内容自动调整宽度的单元格
如果内容比列宽,我对 table-layout:fixed
和内列宽度有问题。
看看我这里的样本: http://jsfiddle.net/H5FLm/
这个标记的主要思想是我需要具有自动宽度的居中列由内部内容物和侧面的液柱组成。
我愿意接受任何修复它或使用不同标记的建议。
谢谢。
I have a problem with table-layout:fixed
and width of inner columns if their content wider than column.
Look at my sample here:
http://jsfiddle.net/H5FLm/
Main idea of this markup that I need centered column with auto-width by inner content and liquid columns on sides.
I'm opened for any suggestions to fix it or use different markup.
Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我更喜欢使用自动换行而不是溢出。检查我的版本此处
添加了
word-wrap:break-word;
到内容类。I prefer using word-wrap instead of overflow. Check my version here
Added
word-wrap: break-word;
to content class.看看这个布局,听起来这就是您正在寻找的:
当前布局不起作用的唯一原因是您选择使用字符串
looooooooooooooong
作为示例文本。 HTML 不换行。从技术上讲,您可以执行overflow:hidden;
并且 BOOM... 问题已解决。如果您使用
loo oooooo oooooo ong
,没问题。Check out this layout, sounds like it's what you're looking for:
The only reason your current layout doesn't work is because of your choice to use the string
looooooooooooooong
as your sample text. HTML does not wrap letters. Technically you can dooverflow: hidden;
and BOOM... problem fixed.Had you used
loo oooooo oooooo ong
, no problem.