表格的CSS：1个固定宽度的列，1个小列，其余列相等

Question

I'm trying to create a table whose first column is fixed width, whose second column contracts as small as it can to fit its text, and whose remaining columns split all remaining space equally, regardless of their contents.

Here's a fiddle to demonstrate, my attempt so far: http://jsfiddle.net/B8LnP/

Two things to notice about the output:

1. I want the columns of the stacked tables to align, as if they were part of a single table
2. Notice the problem is that I can't get columns 3 and 4 to split up the remaining space. I've tried setting the width for the .equal class to both small and large values, but neither way accomplished the goal.

Fiddle HTML

<table>
    <tr>
        <td class="fixed">fixed</td>
        <td class="small">small_as_possible</td>
        <td class="equal">split remaining</td>
        <td class="equal">equally</td>
    </tr>
</table>

<!-- another instance to make sure the columns align -->

<table>
    <tr>
        <td class="fixed">fixed</td>
        <td class="small">small_as_possible</td>
        <td class="equal">equally</td>
        <td class="equal">split remaining</td>
    </tr>
</table>

CSS

table { width: 95%; margin: 0 auto}
td {border: 1px solid}
.fixed {width: 200px}
.small {width: 1px}
.equal { /* what to put here? */ }

Answer 1

This will do the work for you:

CSS:

table { width: 95%; margin: 0 auto; table-layout:fixed;}
td {border: 1px solid}
.fixed {width: 200px;}
.small {width: 120px;}
.equal {width: 50%;}

Demo: http://jsfiddle.net/B8LnP/1/

• So What happens?
  Please note the table-layout:fixed; . With that and the width set on table (percentage of the containing element like in your case or a fixed amount), what happens is that first the fixed width columns are deducted from the table's width, and then the rest of the remaining width of the table is split among the remaining columns which have a percentage width or no width set at all (same as auto).

• Also if all of the remaining columns (other than the ones with fixed width) have a percent width, but the total of the percentages doesn't add up to 100%, the remaining percents are automatically distributed among fixed width columns, so make sure the percentages add up to 100%.

Answer 2

您不能使用类来做到这一点，需要使用colspan属性来做到这一点。