需要设置单击和拖动列标题的最小宽度

Question

我需要在单击并拖动时设置表标头的最大宽度。

我尝试了CSS中的最大宽度和宽度。

th {
    position: relative;
    max-width: 5px;
}

但对此没有用。这是我的代码的链接：

https://codepen.io/jasongardner/pen/qnoxym

我需要修复宽度以拖动表以保持一定距离。

Answer 1

我已经解决了您的问题。将您的JavaScript更改为：

$(function() {
    var startX,
         startWidth,
         $handle,
         $table,
         pressed = false;
    $(document).on({
        mousemove: function(event) {
            if (pressed) {
                var newWidth = startWidth + (event.pageX - startX);
                if (newWidth > 300) {
                    $handle.width(300);
                } else {
                $handle.width(startWidth + (event.pageX - startX));
                }
            }
        },
        mouseup: function() {
            if (pressed) {
                $table.removeClass('resizing');
                pressed = false;
            }
        }
    }).on('mousedown', '.table-resizable th', function(event) {
        $handle = $(this);
        pressed = true;
        startX = event.pageX;
        startWidth = $handle.width();
        $table = $handle.closest('.table-resizable').addClass('resizing');
    }).on('dblclick', '.table-resizable thead', function() {
        // Reset column sizes on double click
        $(this).find('th[style]').css('width', '');
    });
});

这是我更改的代码：

if (pressed) {
   var newWidth = startWidth + (event.pageX - startX);
       if (newWidth > 300) {
           $handle.width(300);
       } else {
           $handle.width(startWidth + (event.pageX - startX));
       }
 }

我创建了变量" newwidth"，并检查它是否大于300。只有在较小的情况下，它才能设置新宽度。因此，实际上，您可以将300替换为要定义为最大宽度的任何数字。

希望这有帮助