作者danny0838 (道可道非常道)
看板Web_Design
标题[问题] CSS 表格框线及栏宽控制
时间Sun Jan 4 13:11:50 2015
我想用 HTML 和纯 CSS 排出左右两栏式表格，架构如下：
<table class="twocol">
<colgroup span="2">
<col class="twocol-key">
<col class="twocol-value">
</colgroup>
<tr>
<td>...</td>
...
</tr>
...
</table>
基本需求如下：
1. 只使用 HTML + CSS，不使用 javascript
2. 最好只设定 table 的 class 解决，
必要时可在 colgroup 或 col 加 class 或 style，
不要设定 tr, td 的 class 或样式值
3. 表格内可能有内嵌表格，因此不使用像 table td 这种可能影响内嵌表格的设定
4. 表格最小宽度为 100% 萤幕宽，如果右栏内容太大（例如有大图片）可撑开
5. 左栏宽度为整个表格的 20%，但无论如何不得小於 70px、不得大於 160px
目前遇到了几个难以解决的问题：
1. 如何用 CSS 做出 <table border="1" cellpadding="3" cellspacing="0"> 的效果？
我试过用以下 CSS，但浏览器显示效果就是不一样...orz
table.twocol {
border: 1px solid black;
border-collapse: collapse;
}
table.twocol > tbody > tr > th,
table.twocol > tbody > tr > td,
border: 1px solid #AAA;
padding: 3px;
}
2. 如何控制栏位的最小宽度及最大宽度？
我试过使用：
.twocol-key { width: 20%; min-width: 70px; max-width: 160px; }
但这样实测无效，
经查是 CSS spec 中 display: table-column 不适用 min-width 及 max-width，
有些人提议加上 display: block;
但加上後 <col> 就不会以 <table> 宽度为基准，变成 width 是 0，
这部分是否有替代方案？
另外就是即使指定
.twocol-key { width: 20%; }，当右栏内容太宽（如大图片），
将不会把表格加宽，而是把左栏缩小，
（我要的是加宽表格，不要压缩最小宽度）
有何方法可解决此问题？
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 114.34.57.99
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Web_Design/M.1420348312.A.1C8.html
1F：推 oToToT: min-width? 01/04 14:18