1

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

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

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

http://jsfiddle.net/N3yeF/4/

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

编辑：症结可能是这样的：

'display' 设置为 'table-column' 或 'table-column-group' 的元素不会被渲染（就像它们具有 'display: none' 一样），但它们很有用，因为它们可能具有引发特定它们代表的列的样式。

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

4

3 回答 3

1

从没有填充、没有边距和没有边框的表格单元格与列的宽度相同的原则开始。

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

<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，你总是会得到值 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 脚本中动态添加它。

于 2014-04-03T22:11:07.503 回答
0

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

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

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

于 2013-07-23T21:05:54.273 回答
0

您可以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');   
}
于 2013-07-23T23:28:57.677 回答