Попытка "синхронизировать" 2 HTML-таблицы (применить ширину столбцов) - PullRequest
Новая
       3

Попытка "синхронизировать" 2 HTML-таблицы (применить ширину столбцов)

3 голосов
/ 17 октября 2010

У меня есть 2 таблицы: table1 («таблица заголовков», в которой есть только 1 строка со столбцами таблицы) - и table2 («таблица данных», в которой есть несколько строк со всеми данными). 1001 *

Таблица1 имеет ширину, назначенную большинству столбцов. Я сейчас пытаюсь применить ширину столбца из таблицы 1 в 1-й строке таблицы 2 (таблица1 имеет ту же ширину, что и таблица2).

Мой код: 

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
});

Проблема:
при установке td-padding в моем css, например: table td{padding:0px;} все работает хорошо (обе таблицы имеют одинаковую ширину столбцов). но как только я изменяю заполнение на что-то вроде table td {padding:2px;padding-left:4px;padding-right:4px;}, таблица данных облажается. При проверке ширины столбцов с помощью firebug все столбцы имеют одинаковую ширину (таблица1 + таблица2), но они все равно выглядят по-разному. Есть идеи, что может быть не так?

1 Ответ

0 голосов
/ 17 октября 2010

Почему бы не один стол, вот так: 

<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>
...