Question

我要创建一个滚动表，说在任何时候滚动时都可以看到10行，但是中间行总是高亮显示，即使在滚动时也是如此。

这样的想法是，随着用户向下滚动，中间行的类别在滚动时会逐渐变化。

我已经创建了一个基本表，其中高亮显示了中间行，但是当我开始滚动时，我希望高亮显示的类移动到下一行，从而使中间行始终在中间高亮显示。

table {
	max-width: 980px;
	table-layout: fixed;
	margin: auto;
}

th, td {
	padding: 5px 10px;
	border: 1px solid #000;
}

thead, tfoot {
	background: #f9f9f9;
	display: table;
	width: 100%;
	width: calc(100% - 18px);
}

tbody {
	height: 300px;
	overflow: auto;
	overflow-x: hidden;
	display: block;
	width: 100%;
}

tbody tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.highlighted{
 background-color: coral;
}

<body>
<table>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
      <th scope="col">Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
      <td>Footer 4</td>
    </tr>
  </tfoot>
</table>
</body>

Answer 1

尝试使用nth-child

tbody tr:nth-child(5n) td{
 background-color: coral;
}

table {
	max-width: 980px;
	table-layout: fixed;
	margin: auto;
}

th, td {
	padding: 5px 10px;
	border: 1px solid #000;
}

thead, tfoot {
	background: #f9f9f9;
	display: table;
	width: 100%;
	width: calc(100% - 18px);
}

tbody {
	height: 300px;
	overflow: auto;
	overflow-x: hidden;
	display: block;
	width: 100%;
}

tbody tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

tbody tr:nth-child(5n) td{
 background-color: coral;
}

<body>
<table>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
      <th scope="col">Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
      <td>Footer 4</td>
    </tr>
  </tfoot>
</table>
</body>

Answer 2

您可以考虑在table元素上保持固定的背景：

table {
  max-width: 980px;
  table-layout: fixed;
  margin: auto;
}

th,
td {
  padding: 5px 10px;
  border: 1px solid #000;
}

thead,
tfoot {
  background: #f9f9f9;
  display: table;
  width: 100%;
  width: calc(100% - 18px);
}

tbody {
  height: 300px;
  overflow: auto;
  overflow-x: hidden;
  display: block;
  width: 100%;
  background:
    linear-gradient(coral,coral) 
    3px calc(50% + 3px) /*left top*/
    /
    calc(100% - 22px) 30px  /* Width height*/
    no-repeat;
}

tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/*.highlighted {
  background-color: coral;
}*/

<body>
  <table>
    <thead>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3</th>
        <th scope="col">Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td class="highlighted">Cell content</td>
        <td class="highlighted">Cell content</td>
        <td class="highlighted">Cell content</td>
        <td class="highlighted">Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
        <td>Footer 4</td>
      </tr>
    </tfoot>
  </table>
</body>

Answer 3

因此，我们首先需要定义表格和单元格高度（我假设所有单元格高度大小都相同）以及一个视图中的单元格大小，以便稍后可以在视图的一半位置使用它来查找单元格。

    var $table = $("#table");
    var $scrollableBody = $("#tbody");
    var $scrollableBodyRow = $("#tbody > tr");
    var scrollableHeight = $scrollableBody.height();
    var cellHeight = $scrollableBody.find('tr').height();
    var cellsInView = Math.round(scrollableHeight / cellHeight);

所以现在我们知道视口中有多少行-cellsInView。

现在，我们需要创建一个函数，该函数将返回每次滚动的顶部行，顶部单元格等于滚动顶部位置除以单元格高度。知道了之后，我们只需要从起始单元格的每个视图中添加一半的项目即可。

 var findMiddle = function () {
      var offsetTop = $scrollableBody.scrollTop(),
        index;

      if (offsetTop === 0) {
        // find middle one
        index = Math.round(cellsInView / 2) - 1;
      } else {
        var topCell = Math.round(offsetTop / cellHeight);
        $('.highlighted').removeClass('highlighted');
        index = Math.round((topCell + cellsInView / 2)) - 1
      }

      $("#row-" + index).addClass("highlighted");
    }

我以此为辅助来切换课程。

    $scrollableBodyRow.each(function (index) {
      $(this).attr('id', "row-" + index);
    });

我们在负载上设置了亮点。

    findMiddle();

演示链接：https://jsfiddle.net/sabo9n8L/2/

Answer 4

如果您打算在滚动时更改颜色，则可能也要使用javascript：

$(function() {
  $("tbody").scroll(function(e) {
    var fifth = null;
    $("tbody tr").each(function() {
      if (isScrolledIntoView($(this)) && !fifth) {
        fifth = $(this).nextAll().eq(4);
        $(this).siblings().children("td").removeClass("highlighted");
        fifth.children("td").addClass("highlighted");
      }
    });
  });

  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
  }
});

table {
  max-width: 980px;
  table-layout: fixed;
  margin: auto;
}

th,
td {
  padding: 5px 10px;
  border: 1px solid #000;
}

thead,
tfoot {
  background: #f9f9f9;
  display: table;
  width: 100%;
  width: calc(100% - 18px);
}

tbody {
  height: 300px;
  overflow: auto;
  overflow-x: hidden;
  display: block;
  width: 100%;
}

tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.highlighted {
  background-color: coral;
}

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

<body style="-ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;">
  <table>
    <thead>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3</th>
        <th scope="col">Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td class="highlighted">Cell content</td>
        <td class="highlighted">Cell content</td>
        <td class="highlighted">Cell content</td>
        <td class="highlighted">Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
      <tr>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
        <td>Cell content</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
        <td>Footer 4</td>
      </tr>
    </tfoot>
  </table>
</body>

突出显示滚动表的中间行

4 个答案: