在外部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一般不要使用，會消耗不少資源