Combining fixed and variable width columns in one table

问题

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 %):

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

回答1:

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

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

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:

<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

Design a table with CSS3

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

<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

来源：https://stackoverflow.com/questions/12552945/combining-fixed-and-variable-width-columns-in-one-table