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

时间:2012-09-23 13:58:57

标签: css css3 width css-tables

如何使用CSS创建一个包含以下内容的表格(前三列在px中具有固定宽度,以下列在宽度中以%表示):

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

3 个答案:

答案 0 :(得分: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

修改:结果可能不需要另外tableanother little link

答案 1 :(得分:0)

您可以将最后四个单元格放在主表格的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>

答案 2 :(得分:-2)

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