Заголовок таблицы / проблема ширины тела

Question

У меня есть таблица, в которой есть строка заголовка и несколько строк для содержимого тела.

Теперь это фактически две отдельные таблицы:

1. для заголовка
2. для содержимого тела (которое является частью другого iframe)

Я хочу, чтобы ширина заголовка столбца и его содержимого была одинаковой.

Как я могу обеспечить одинаковую ширину и внешний вид, как если бы они были частью одной таблицы?

Я открыт как для CSS, так и для исправления JavaScript.

Примечание: я не смогу использовать фиксированную ширину столбцов И не могу управлять объединением в одну таблицу ...

Answer 1

Может как то так?Это заставит ваши таблицы вести себя так, как если бы один из них

    var table1 = document.getElementsByTagName('table')[0].getElementsByTagName('tr');
    var table2 = document.getElementsByTagName('iframe')[0].contentDocument.getElementsByTagName('tr');

    var tr = merge([table1,table2]);
    var padding = 2; //set your padding to make up for difference from offsetwidth vs style width

    var higestWidth = new Array();
    for(var i in tr){
        for(var j in tr[i].childNodes){
        var td = tr[i].childNodes[j];
        if(typeof td == 'object'){
            if(higestWidth[td.cellIndex] == null || higestWidth[td.cellIndex] < td.offsetWidth){
            higestWidth[td.cellIndex] = td.offsetWidth;
            }
        }
        }
        for(var j in tr[i].childNodes){
        var td = tr[i].childNodes[j];
        if(typeof td == 'object'){
            td.setAttribute('width', higestWidth[td.cellIndex] - padding);
            }
        }
        }

Почти забыл, что я использую здесь некоторые свои собственные функции, вот и все.

        var foreach = function(object,loop){
        for (var key in object) {
            if (object.hasOwnProperty(key)) {
            loop(object[key],key);
            }
        }
    }
    var merge = function(objectCollections){
        var array = new Array();
        foreach(objectCollections,function(objectCollection){
            foreach(objectCollection,function(object){
                array.push(object);
            });
        });
        return array;
    }

Answer 2

Вы должны использовать <thead> и <tbody>, если можете.

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 / Col 1</td>
      <td>Row 1 / Col 2</td>
      <td>Row 1 / Col 3</td>
    </tr>
    <tr>
      <td>Row 2 / Col 1</td>
      <td>Row 2 / Col 2</td>
      <td>Row 2 / Col 3</td>
    </tr>
    ...
  </tbody>
</table>

Если нет причин, по которым у вас есть отдельные таблицы, было бы намного проще сделать это таким образом.

Answer 3

Я вроде согласен с Родриго, хотя я бы установил max-width и min-width, а не просто width следующим образом:

.col-username { 
     max-width:150px;
     min-width:150px;
}
.col-email { 
     max-width:200px;
     min-width:200px;
}

В противном случае фактический размер может зависеть от содержимого ячейки таблицы.и доступное пространство.

Answer 4

Если не важно, чтобы таблица была «плавной», вы можете определить классы для каждого из ваших столбцов и стилизовать их с помощью css.Пример:

.col-username { width:150px; }
.col-email { width:200px; }

и т. Д.

Редактировать: здесь - пример, который я только что нашел, который использует CSS для достижения этого эффекта.