在外部CSS中实现Table td的colspan

个人感觉Table布局一直都是比较麻烦的

前阵子有个客户需求，要把下面代码中的colspan=3去掉，在外部css中定义

<table border="2px">
    <tr>
        <td colspan="3" >
            table content
        </td>
    </tr>
    <tr>
        <td>
            table content
        </td>
        <td>
            table content
        </td>
        <td>
            table content
        </td>
    </tr>
</table>

 

由于css中td并没有colspan属性，所以非常令人头痛，可以说是没办法实现的

最后用这么个方法忽悠了他：

<style type="text/css">
    .tdcolspan
    {
        test: expression(this.colSpan="3");
    }
</style>
<table border="2px">
    <tr>
        <td class="tdcolspan">
            table content
        </td>
    </tr>
    <tr>
        <td>
            table content
        </td>
        <td>
            table content
        </td>
        <td>
            table content
        </td>
    </tr>
</table>

 

如代码所示，IE的css expression到是可以实现需求：

 

然而，需要注意的是：

expression只能在IE下使用

expression一般不要使用，会消耗不少资源