最小宽度不适用于表格布局：已修复
[英]min-width doesn't work with table-layout:fixed
问题描述
I try to use min-width on a td table which has a "table-layout:fixed" caracteristic but it doesn't work : 
我尝试在具有“ table-layout：fixed”特征的td表上使用min-width，但是它不起作用：
https://jsfiddle.net/c1qje0us/ https://jsfiddle.net/c1qje0us/
HTML : HTML：
<BODY>
<TABLE>
<TR>
<TD class='test'>test</TD>
<TD>blablablablablablablablablablablablablablabla</TD>
</TR>
</TABLE>
</BODY>
CSS : CSS：
table{
width:100%;
table-layout:fixed;
word-wrap:break-word;
}
.test{
width: 25%;
min-width: 100px;
}
Have someone an idea to do that? 有一个想法去做吗？
PS : I need table-layout CSS caracteristic to force the line break when the window's width is small PS：当窗口的宽度较小时，我需要使用表布局CSS特性来强制换行
1 个解决方案
解决方案1
1 已采纳 2016-03-04 14:04:24
if it is to set 2 boxes side by side , flex would do the job for you. 如果要并排设置两个盒子，flex会为您完成这项工作。
(added some css to break you words) （添加了一些CSS来打断你的话）
.fixedRow { display: flex; max-width: 100%; background:linear-gradient(to right, gray 220px, lightgray 220px); /* check min-width of first-cell */ } div { box-shadow:0 0 0 1px red; -ms-word-break: break-all; word-break: break-all; // Non standard for webkit word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .test { width: 25%; min-width: 220px; } .liquid { flex: 1;
<div class="fixedRow"> <div class="test"> Test </div> <div class="liquid">blablablablablablablablablablablaablablablablaablablablablaablablablablablablablabla </div> </div>
example with 3 boxes and 2 rows: 3盒2行的示例：
.fixedRow { display: flex; max-width: 100%; background: linear-gradient(to right, gray 220px, transparent 220px), linear-gradient(to left, gray 220px, transparent 220px ) lightgray; /* check min-width of first-cell */ } div { box-shadow:0 0 0 1px red; -ms-word-break: break-all; word-break: break-all; // Non standard for webkit word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .test { width: 25%; min-width: 220px; } .liquid { flex: 1;
<div class="fixedRow"> <div class="test"> Test </div> <div class="liquid">blablablablablablablablablablablaablablablablaablablablablaablablablablablablablabla </div> <div class="test"> Test me in full page </div> </div> <div class="fixedRow"> <div class="test"> Test </div> <div class="liquid">blablablablablablablablablablablaablablablablaablablablablaablablablablablablablabla </div> <div class="test"> Test </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.