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

How can I create a table with CSS like the following (the first three columns with a fixed width in px and the following columns with a width in %):

如何使用CSS创建一个表，如下所示（前三列在px中具有固定宽度，以下列以宽度为％）：

I know how I can create a column with variable or fixed width.

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

3 个解决方案

#1

Nest another table for the 4 columns on the right. The HTML structure would look like:

为右边的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:

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;
}

And a little demo: little link.

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

Edit: it turns out there might be no need for another table: another little link.

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

#2

You could place the last four cells in a table placed in a td of the main table - see Fiddle - like so:

您可以将最后四个单元格放在放置在主表格的td中的表格中 - 请参阅小提琴 - 如下所示：

<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>

#3

OP was originally asking to

OP原本是要求的

Design a table with CSS3

用CSS3设计一个表

So here it is in CSS3, with as less code as possible

所以这里是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:

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

现场演示