表格的CSS没有被正确应用?

时间:2011-06-21 13:26:12

标签: html css html-table

http://jsfiddle.net/RpCTx/4/

表格列未更改为我指定的宽度。第二栏是缩小......

的方法

的CSS:

body{
    font-size: 11px;
    font-family: Calibri, Arial, Helvetica;
}
th {
     border-bottom: 1px solid black;   
}
.product_name, td {
    width: 132px;
}
.description, td + td {
    width: 290;
}
.quantity, td + td + td {
    width: 30px;
}
.list_upfronts, td + td + td + td {
    width: 77px;
}
.sales_price, td + td + td + td + td{
    width: 76px;
}

HTML:

<strong>
    <u>
        Starcraft, or something
    </u>
</strong>

<table id="integration_and_data_services">
    <tr>
        <th class="product_name">
            <b>Product Name</b>
        </th>
        <th class="description">
            <b>Description Information</b>
        </th>
        <th class="quantity">
            <b>QTY</b>
        </th>
        <th class="list_upfronts">
            <b>Upfronts</b>
       </th>
        <th class="sales_price">
            <b>Sales Price</b>
        </th>
    </tr>
    <tr>
        <td>Le Product name</td>
        <td>Lots of text here about whatever the product is about. Just needs to wrap to multiple lines.... Probably should be about starcraft... whatever.</td>
        <td>1.00</td>
        <td>$4500.00</td>
        <td>$4500.00</td>
    </tr>
</table>

3 个答案:

答案 0 :(得分:3)

您错过了px关于第2列的width声明:

.description, td + td {
    width: 290px;
}

Demo

答案 1 :(得分:2)

每个都有宽度地址

你在tds中不需要它们。删除td + ...

像这样,http://jsfiddle.net/RpCTx/8/

答案 2 :(得分:0)

规则中存在错误:你缺少'px'

这是正确的:

.description, td + td {
    width: 290px;
}