Html CSS 表格列宽：固定 - 动态（30%） - 动态（70%） - 固定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12641104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Table columns width: fixed - dynamic(30%) - dynamic(70%) - fixed
提问by ihtus
I managed to obtain this kind of table layout:
我设法获得了这种表格布局：
fixed - dynamic(50%) - dynamic(50%) - fixed
固定 - 动态 (50%) - 动态 (50%) - 固定
http://jsfiddle.net/ihtus/ksucU/
http://jsfiddle.net/ihtus/ksucU/
But how do I get this kind? fixed - dynamic(30%) - dynamic(70%) - fixed
但是我怎么得到这种呢？固定 - 动态 (30%) - 动态 (70%) - 固定
Here's my CSS:
这是我的 CSS：
table {
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
td {
border: 1px solid #333;
}
回答by Mr. Mr.
Like this:
像这样：
<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;
}
回答by Richard Otvos
The general approach is the same as the one Monkieboy used, but you should avoid inline styles. ( by that I mean writing style="someting") in your html file. You should use classes and CSS instead.
一般方法与 Monkieboy 使用的方法相同，但您应该避免使用内联样式。（我的意思是写style="someting"）在你的 html 文件中。您应该改用类和 CSS。
First give the td a class like this <td class="thin-column">text here</td>,
then in your CSS use that to apply styles: .thin-column:{ width: 30% }
首先给 td 一个这样的类<td class="thin-column">text here</td>，然后在你的 CSS 中使用它来应用样式：.thin-column:{ width: 30% }
