[問題] CSS 表格框線及欄寬控制

作者: danny0838 (道可道非常道)   2015-01-04 13:11:50
我想用 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%; },當右欄內容太寬(如大圖片),
將不會把表格加寬,而是把左欄縮小,
(我要的是加寬表格,不要壓縮最小寬度)
有何方法可解決此問題?
作者: oToToT (屁孩)   2015-01-04 14:18:00
min-width?

Links booklink

Contact Us: admin [ a t ] ucptt.com