作者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/m.aspx?n=bbs/Web_Design/M.1420348312.A.1C8.html
1F：推 oToToT: min-width? 01/04 14:18