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

Question

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

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

Answer 1

table为右侧的 4 列嵌套另一个。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;
}

还有一个小演示：小链接。

编辑：事实证明可能不需要另一个table：另一个小链接。

Answer 2

您可以将最后四个单元格放置在主表的 td 中的表中 -请参阅 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; }
​&lt;/style>

Answer 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%;
}
​

现场演示