Safari在表中计算错误的宽度

时间:2013-02-05 12:24:05

标签: javascript html css safari html-table

我正在为HTML表格开发一个简单的列调整大小功能。

到目前为止,该表工作正常 - 除了Safari (版本5.1.4)。出于某种原因,Safari为单元格宽度提供了一个负(!)值。

这里有一个JSFiddle:simple-resize

如果从style="width"元素中删除<th>属性(或在代码检查器中禁用),则可以看到负列宽值

HTML:

<div class="tblcont" id="cont">
<table id="table1" class="pivot-table pivot-fixed-layout">
    <thead>
        <tr id="tr1">
            <th style="width: 52px;">city</th>
            <th style="width: 26px;"># c</th>
            <th style="width: 37px;"># id</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tel Aviv</td>
            <td>814</td>
            <td>1,047</td>
        </tr>
        <tr>
            <td>Natanya</td>
            <td>805</td>
            <td>1,016</td>
        </tr>
    </tbody>
    </table>
</div>

CSS:

.pivot-table.pivot-fixed-layout {
  border-collapse: collapse;
  table-layout: fixed;
  width: 0;
}

.pivot-table td, .pivot-table th {
  overflow: hidden;
  padding: 0 6px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  text-overflow: ellipsis;
}

.pivot-table th {
    cursor: col-resize;
}

使用Javascript:

var pressed = false,
    $column,
    $table = $("table"),
    startX, startWidth,
    tableInitialWidth = $('#cont').width() - 100,
    currentTableWidth, newTableWidth;

$("table th").mousedown(function(e) {
    $column = $(this);
    pressed = true;
    startX = e.pageX;
    startWidth = $column.width();
    $column.addClass("resizing");
});

$(document).mousemove(function(e) {
    if(pressed) {

        var delta = e.pageX - startX,
            currentColumnWidth,
            newColumnWidth;

        currentColumnWidth = $column.width();
        newColumnWidth = startWidth + delta;

        currentTableWidth = $table.width();
        newTableWidth = currentTableWidth + delta;

        // no not make columns smaller than min width
        if (newColumnWidth > 2) {
            $column.width(newColumnWidth);
        }
    }
});

$(document).mouseup(function() {
    if(pressed) {
        $column.removeClass("resizing");
        pressed = false;
    }
});

0 个答案:

没有答案
相关问题