[英]CSS Table columns width: fixed - dynamic(30%) - dynamic(70%) - fixed
我设法获得了这种表格布局:
固定 - 动态(50%) - 动态(50%) - 固定
http://jsfiddle.net/ihtus/ksucU/
但是我怎么得到这种呢? 固定 - 动态(30%) - 动态(70%) - 固定
这是我的CSS:
table {
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
td {
border: 1px solid #333;
}
像这样:
<table>
<tr>
<td style="width:200px;">
200px width - content
</td>
<td width="30%">
dynamic width - content
</td>
<td width="70%">
dynamic width - content
</td>
<td style="width:100px;">
100px width - content
</td>
</tr>
</table>
table {
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
td {
border: 1px solid #333;
}
一般方法与Monkieboy使用的方法相同,但您应该避免使用内联样式。 (我的意思是在你的html文件中写出style="someting"
)。 您应该使用类和CSS。
首先给td一个这样的类<td class="thin-column">text here</td>
,然后在CSS中使用它来应用样式: .thin-column:{ width: 30% }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.