Question

我有2个表：table1（“header-table”，只有1行表列） - 和table2（“data-table”，它有几行包含所有数据）。< / p>

table1的宽度分配给大多数列。我现在正尝试将table1的列宽应用于table2的第1行（table1的宽度与table2相同）。

我的代码是：

var tr1 = $("tr",tblHeader).eq(0); // 1st row from header-table
var tr2 = $("tr",tblData).eq(0);   // 1st row from data-table
var td2 = $("td",tr2);             // all cells from data-table

$('td',tr1).each(function(i)       
{
    var td1 = $(this);                // table1 column header-cell
    var width = (td1.css('width'));   // column-width from header-table
    td1.css('width',width+"px");      // apply width to header-table-cell
    td2.eq(i).css('width',wi+"px");   // apply width to data-table-cell
});

问题：
在我的css中设置td-padding时：table td{padding:0px;}这一切都很好（两个表都有相同的列宽）。但是一旦我将填充更改为类似table td {padding:2px;padding-left:4px;padding-right:4px;}的内容，数据表就会搞砸了。使用firebug检查列宽时，所有列都具有相同的宽度（table1 + table2），但它们看起来仍然不同。什么想法可能是错的？

Answer 1

为什么不只是一个表，如下：

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mike</td>
            <td>26</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Peter</td>
            <td>27</td>
            <td>Great Britain</td>
        </tr>
        <tr>
            <td>Hans</td>
            <td>26</td>
            <td>Germany</td>
        </tr>
    </tbody>
</table>

试图“同步”2个html表（应用列宽）

1 个答案: