jQuery DataTables插件的sScrollX和sScrollY属性

原始的HTML代码如下：

<table id="myTable" class="my-class">
    <thead>
        <tr>
            <th>Column 1</th>
            <ht>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>AAA</td>
            <td>BBB</td>
        </tr>
    </tbody>
</table>

 

DataTables插件，如果初始化时设置了sScrollX或者sScrollY属性，那么表格组件初始化之后，页面会生成两个<table>。如果不设置这两个属性，则只会有一个<table>生成。

第一个table里面，只有<thead>部分，这个就是页面看到的表格的表头。这个table的class是my-class，没有id。

第二个table里面，id是myTable，class是my-class。这个table含有<thead>和<tbody>，这个thead里面是空的，据我推测应该是用来让表格的列宽与表头的列宽相等的。<tbody>里面是页面看到的表格数据。这个table的空<thead>，会导致页面中看到的表格，表头和表体之间有条很粗的线，但是我们又不能将这个空thead设置成display: none;，这样会导致在IE下表格显示错位。目前还没有找到好方法。

 

另外，如果在原始的html代码中使用了<tfoot>，那么组件初始化之后，还会多生成一个table，这个table的class是my-class。它里面只有<tfoot>，这个就是页面看到的表格的tfoot部分。

 

sScrollX属性还起到了设置表格宽度的作用。假如表格原来有10列，可以100%充满整个窗口。在初始化表格时，通过aoColumns参数，隐藏了7列，如果不设置sScrollX为100%，那么表格只有这3列宽，不会充满窗口，如果设置了sScrollX : '100%'，则可以让表格的宽仍然可以充满整个窗口。