Question

有没有人找到一种可靠的方法来计算chrome中<col>元素的宽度？

我正在编写一个jquery插件，我需要计算表列的宽度，使用<col>是获取和设置这些宽度的最可靠方法。唯一的问题是我无法用chrome读取它们。

这是一个小提琴，在这里不可能找到chrome中第二列的宽度：

我的挑战： 在chrome中查找第二列的宽度，而不必在表中附加另一行。

编辑：症结可能就是：

带＆＃39;显示＆＃39;的元素设置为＆＃39; table-column＆＃39;或者＆＃39; table-column-group＆＃39;没有呈现（就像它们有＆display = none＆＃39;），但它们很有用，因为它们可能具有为它们所代表的列引入某种样式的属性。

（来自http://www.w3.org/TR/CSS2/tables.html）

Answer 1

这可能不是你想要的，但这是一个计算列宽的小提琴：

http://jsfiddle.net/JVHUV/1/

据我所知，<col>元素没有大小，因为它们实际上不是渲染元素。要获得列的大小，您需要衡量表格中的实际<td>或<th>元素。

Answer 2

您可以通过向width添加课程来获取<col>。

创建一个类（使用display:block;，因为<col>使用display: table-column;）：
```
.col{ display:block; width:100%; } 
```
将课程应用于<col id="col2">：
```
$('#col2').addClass('col').width();
```

将局部变量设置为width：

var px = 0;
px = $('#col2').addClass('col').width();

从<col id="col2">
中删除课程
```
$('#col2').removeClass('col');
```

然后，您可以通过执行以下操作设置<col>宽度：

    if(!isNaN(parseInt(px)))
        $('#col2').css('width', parseInt(px) + 'px');

样本： http://jsfiddle.net/dcRn7/2/

示例：

function getSize(){
    var px = 0;
    px = $('#col2').addClass('col').width();
    $('#col2').removeClass('col');
    $('#result').text(px);
}

function setSize(px){
    if(!isNaN(parseInt(px)))
        $('#col2').css('width', parseInt(px) + 'px');   
}

Answer 3

首先说明没有填充，没有边距和没有边框的表格单元格与列的宽度相同。

现在我们要做的就是在表格的末尾添加一个虚拟表格行。

<table>
    <colgroup>
        <col></col>
        <col id='col2'></col>
        <col></col>
        <col></col>
    </colgroup>
    <thead>
        <tr><th colspan='4'>This table has 4 colums. How do I get the <col> widths?</tr>
    </thead>
    <tbody>
    <tr><th colspan='2'>colspan 2</th><th colspan='2'>colspan 2</th></tr>
    <tr><td colspan='3'>colspan 3</td><td>colspan 1</td></tr>
    <tr><td>colspan 1</td><td colspan='3'>colspan 3</td></tr>
    <tr><th>colspan 1</th><th colspan='2'>colspan 2</th><th>colspan 1</th></tr>
    <tr class="notseen nopad">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>

然后设置风格

tr.notseen {
    display: none;
}
tr.nopad > td {
    padding: 0;
    border: 0;
    margin: 0;
}

然后，在你的jQuery中，只需在计算宽度之前使行可见。（如果<td>在显示宽度时显示none作为其显示值，则总是以值0结束。）

var str_ = '';
$('table > tbody > tr:last-child').removeClass('notseen');
$('table > tbody > tr:last-child > td').each(function(i) {
    $col = $('table > colgroup > col').eq(i);
    $td  = $(this);
    col_width_ = $col.width();
    td_width_ = $td.width();
    // alert message can be used in FireFox to verify that values match
    alert('col: ' + col_width_ + ' ::: td: ' + td_width_);
    str_ = str_ + 'col'+i+': ' + td_width_ + 'px; ';
});
$('table > tbody > tr:last-child').addClass('notseen');
alert(str_); // alert the width of each column in table

如果由于某种原因无法在HTML标记中添加虚拟行，则始终可以在jQuery脚本中动态添加虚拟行。

计算铬的宽度

3 个答案: