Question

我有一个HTML表格，我需要修复表格的第一列，这样我就可以向右滚动并查看与第一列的任何记录相关的信息，当我尝试滚动第一列时列是好的，但它也修复了我的表的下两个标题。

这是我的jquery：

(function($) {

$.fn.tableHeadFixer = function(param) {
    var defaults = {
        head: true,
        foot: false,
        left: 0,
        right: 0
    };

    var settings = $.extend({}, defaults, param);

    return this.each(function() {
        settings.table = this;
        settings.parent = $("<div></div>");
        setParent();

        if(settings.head == true)
            fixHead();

        if(settings.left > 0)
            fixLeft();

        // self.setCorner();

        $(settings.parent).trigger("scroll");

        $(window).resize(function() {
            $(settings.parent).trigger("scroll");
        });
    });

    function setTable(table) {

    }


    function setParent() {
        var container = $(settings.table).parent();
        var parent = $(settings.parent);
        var table = $(settings.table);

        table.before(parent);
        parent.append(table);
        parent
            .css({
                'width' : '100%',
                'height' : container.css("height"),
                'overflow' : 'scroll',
                'max-height' : container.css("max-height"),
                'min-height' : container.css("min-height"),
                'max-width' : container.css('max-width'),
                'min-width' : container.css('min-width')
            });

        parent.scroll(function() {
            var scrollWidth = parent[0].scrollWidth;
            var clientWidth = parent[0].clientWidth;
            var scrollHeight = parent[0].scrollHeight;
            var clientHeight = parent[0].clientHeight;
            var top = parent.scrollTop();
            var left = parent.scrollLeft();

            if(settings.head)
                this.find("thead tr > *").css("top", top);

            if(settings.left > 0)
                settings.leftColumns.css("left", left);

        }.bind(table));
    }

    function fixHead () {
        var thead = $(settings.table).find("thead");
        var tr = thead.find("tr");
        var cells = thead.find("tr > *");

        setBackground(cells);
        cells.css({
            'position' : 'relative'
        });
    }


    function fixLeft () {
        var table = $(settings.table);

        var fixColumn = settings.left;

        settings.leftColumns = $();

        for(var i = 1; i <= fixColumn; i++) {
            settings.leftColumns = settings.leftColumns
                .add(table.find("tr > *:nth-child(" + i + ")"));
        }

        var column = settings.leftColumns;

        column.each(function(k, cell) {
            var cell = $(cell);

            setBackground(cell);
            cell.css({
                'position' : 'relative'
            });
        });
    }


    function setBackground(elements) {
        elements.each(function(k, element) {
            var element = $(element);
            var parent = $(element).parent();

            var elementBackground = element.css("background-color");
            elementBackground = (elementBackground == "transparent" || elementBackground == "rgba(0, 0, 0, 0)") ? null : elementBackground;

            var parentBackground = parent.css("background-color");
            parentBackground = (parentBackground == "transparent" || parentBackground == "rgba(0, 0, 0, 0)") ? null : parentBackground;

            var background = parentBackground ? parentBackground : "white";
            background = elementBackground ? elementBackground : background;

            element.css("background-color", background);
        });
    }
};
})(jQuery);

我还把这个例子放在这个Fiddle窗口上，不要让示例滚动，所以如果你在本地加载它并使窗口变小你就能滚动并看到我提到的问题之前是表格的标题

希望有人帮助我！

Answer 1

如果您感兴趣，只需使用HTML和CSS解决方案，就可以使用JS。更容易实现，并且跨浏览器工作也不会像上面的JS那样产生错误。

<强> CSS：

section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}

<强> HTML：

<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
          <th>
            Description
            <div>Description</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
        </tr>
        <tr>
          <td>bgcolor</td>
          <td>rgb(x,x,x), #xxxxxx, colorname</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
        </tr>
        <tr>
          <td>border</td>
          <td>1,""</td>
          <td>Specifies whether the table cells should have borders or not</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

<强> WORKING EXAMPLE

使用Jquery固定列（表头问题）

1 个答案: