将固定宽度列和可变宽度列组合在一个表中答案

【问题标题】：Combining fixed and variable width columns in one table将固定宽度列和可变宽度列组合在一个表中
【发布时间】：2012-09-23 13:58:56
【问题描述】：

如何使用 CSS 创建一个表格，如下所示（前三列以 px 为固定宽度，以下列以 % 为宽度）：

我知道如何创建具有可变或固定宽度的列。

【问题讨论】：

等等，加起来是 100% + 60px；除非 25% 的宽度是 剩余宽度的 25%？而且我认为这不是css3 的问题，真的..？

标签： css width css-tables

【解决方案1】：

为右侧的 4 列嵌套另一个 table。 HTML 结构如下所示：

<table class = "big first">
<tr>
<td class = "px10">Cell1</td>
<td class = "px20">Cell2</td>
<td class = "px30">Cell3</td>
<td>
    <table class = "big">
    <td>1</td><td>2</td><td>3</td><td>4</td>
    </table>
</td>
</tr>
</table>

CSS：

.big {
    width: 100%;
}
.first {
    table-layout: fixed;
}
.big, .big td {
    border: 1px sold black;
}
.big td {
    background: rgb(0, 162, 232);
}
.big .px10 {
    background: orange;
    width: 10px;
}
.big .px20 {
    background: green;
    width: 20px;
}
.big .px30 {
    background: yellow;
    width: 30px;
}

还有一个小演示：little link。

编辑：事实证明，可能不需要另一个table：another little link。

【讨论】：

从语义上讲，您可以使用colgroup 而不是嵌套的table，但到底是什么语义：P（我相信没有太多浏览器支持样式colgroup/ col 无论如何）
@BoltClock 好吧，我尽量尊重语义（try to），但在这种情况下，我认为这不是最需要担心的事情 :)
@BoltClock 见编辑。嗯，不知道是不是符合OP的要求。
感谢您的帮助 :) 工作正常并通过了 w3c 验证器（“成功检查为 HTML5”）

【解决方案2】：

您可以将最后四个单元格放置在主表的 td 中的表中 - see Fiddle - 像这样：

<div class="wrapper">
    <table class="table-main">
        <tr>
            <td class="first"> </td>
            <td class="second"> </td>
            <td class="third"> </td>
            <td class="fluid">
                <table class="table-wrapped">
                    <tr>
                        <td class="td-quarter"> </td>
                        <td class="td-quarter"> </td>
                        <td class="td-quarter"> </td>
                        <td class="td-quarter"> </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

<style>
    .wrapper { min-width: 150px; max-width: 550px;}
    .table-main { width: 100%; background: blue; }
    td { border: 1px solid #000; background: #fc0; height: 20px; }

    .first { width: 10px; }
    .second { width: 20px; }
    .third { width: 30px; }

    .fluid { min-width: 100px; max-width:500px;border:0;}
    .table-wrapped { width:100%;}
    .td-quarter { width: 25%; background:blue; }
</style>

【讨论】：

这样做的问题是它不支持多行 - 所以下一行需要另一个嵌套表等，这可能是没有语义的。
@StuCox 这不是真的，是吗？
@StuCox：除非您有嵌套表格的单元格跨度与外部表格中的行数一样多。当然，这也不会使其更具语义化，并且还必须对行跨度进行硬编码。
@Abody97 - 我可能错了...您对下一行的标记有何建议？
@StuCox 实际上，我想到了与@BoltClock 相同的东西——添加rowspan。不过没关系——你说得对，它在语义上不是很好。

【解决方案3】：

OP 最初是要求

使用 CSS3 设计表格

所以这里是 CSS3，代码尽可能少

<div id="first">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<div id="second">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

CSS：

#first, #second {
    float:left;
    overflow:hidden;
}
#first > div, #second > div {
    float:left;
}
#first > div:first-child {
    width:10px;
}
#first > div:nth-child(2) {
    width:20px;
}
#first > div:nth-last-child(1) {
    width:30px;
}
#second {
    min-width:100px;
    max-width:500px;
}
#second > div {
    width:25%;
}

Live demo

【讨论】：

哦，你确定吗？我在编码时没有注意到......我的意思是，他真的想要一张桌子吗？
@cimmanon 所以？该问题没有说明使用 <table> 作为要求。
从未听说过 CSS3 表格，但是
“CSS3”并不意味着“使用 div 代替表格”...我相信 OP 提到了 CSS3，因为他希望会有一个纯 CSS3 解决方案。这显然是表格数据，所以最语义化的标记是带有<tr>s、<td>s 等的<table> 标签。
现在显然是表格数据，原来的问题不是，否则我不会提出这种方法。