javascript - 使用 colspan 在 <td> 上定位 Sticky？-6ren

javascript - 使用 colspan 在上定位 Sticky？

转载作者：行者123 更新时间：2023-12-05 00:29:03

好像是 sticky不适用于 <td>与 colspan .有办法解决吗？

body {
  font-family: 'Lucida Grande';
}

div {
  width: 500px;
  height: 200px;
  overflow: scroll;
}

td,
th {
  padding: 2px 5px;
  white-space: nowrap;
}

.sticky-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background: #146775;
  color: white;
  z-index: 3;
}

.sticky-header:first-child {
  left: 0;
  z-index: 4;
}

.sticky-row {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  top: 23px; /* This seems to work differently for Safari, FF, Chrome etc. Here adjusted for FF */
  background: #1C4464;
  color: white;
  z-index: 3;
}
.sticky-row:nth-child(2) {
  left: 100px; /* How can I make this dynamic? */
  z-index: 2;
}
span {
  position: absolute;
  top: 2px;
  left: 113px;
}

.sticky-column {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  background: #569CA8;
  color: white;
  z-index: 1;
  width: 100px; /* How can I make this dynamic? */
}

<div>
  <table cellspacing="0">
    <thead>
      <tr>
        <td class="sticky-header">Header 1</td>
        <td class="sticky-header">Header 2</td>
        <td class="sticky-header">Header 3</td>
        <td class="sticky-header">Header 4</td>
        <td class="sticky-header">Header 5</td>
        <td class="sticky-header">Header 7</td>
        <td class="sticky-header">Header 8</td>
        <td class="sticky-header">Header 9</td>
        <td class="sticky-header">Header 10</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky-row">Sticky Row 1</td>
        <td class="sticky-row" colspan="9">How can I make this sticky?</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-row">Sticky Row 2<span>Dirty way of making sticky</span></td>
        <td class="sticky-row" colspan="9"></td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-row">Sticky Row 3</td>
        <td class="sticky-row" colspan="9">How can I make this sticky?</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
    </tbody>
  </table>
</div>

最佳答案

实际上它已经很粘了，问题是由于 td 的宽度，它没有理由移动。因此，为了使它们都具有粘性，请更改 科尔斯潘在第二个 td 上(为了让它更好地给它一个 50px 的左边，让它们彼此相邻移动)。希望这可以解决您的问题。

更新 :

2nd td 上的 colspan 是您的代码不起作用的原因，我通过将结构替换为此来解决此问题

<tr class="darkblue">
    <td class="sticky-row">Sticky Row 1</td>
    <td class="sticky-row" colspan>How can I make this sticky?</td>
    <td colspan="8"></td>
  </tr>

并添加了一个额外的 css 类来修复 tr 的背景颜色

.darkblue {
  background: #1C4464;
  width: 100%;
}

.sticky-row {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  top: 23px;
  color: white;
  z-index: 3;
}

下面的完整代码供引用

    body {
  font-family: 'Lucida Grande';
}

div {
  width: 500px;
  height: 200px;
  overflow: scroll;
}

td,
th {
  padding: 2px 5px;
  white-space: nowrap;
}

.sticky-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background: #146775;
  color: white;
  z-index: 3;
}

.sticky-header:first-child {
  left: 0;
  z-index: 4;
}

.darkblue {
  background: #1C4464;
  width: 100%;
}

.sticky-row {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  top: 23px;
  /* background: #1C4464; */
  color: white;
  z-index: 3;
}
.sticky-row:nth-child(2) {
  left: 100px; /* How can I make this dynamic? */
  z-index: 2;
}
span {
  position: absolute;
  top: 2px;
  left: 113px;
}

.sticky-column {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  background: #569CA8;
  color: white;
  z-index: 1;
  width: 100px; /* How can I make this dynamic? */
}

<div>
  <table cellspacing="0">
<thead>
  <tr>
    <td class="sticky-header">Header 1</td>
    <td class="sticky-header">Header 2</td>
    <td class="sticky-header">Header 3</td>
    <td class="sticky-header">Header 4</td>
    <td class="sticky-header">Header 5</td>
    <td class="sticky-header">Header 7</td>
    <td class="sticky-header">Header 8</td>
    <td class="sticky-header">Header 9</td>
    <td class="sticky-header">Header 10</td>
  </tr>
</thead>
<tbody>
  <tr class="darkblue">
    <td class="sticky-row">Sticky Row 1</td>
    <td class="sticky-row" colspan>How can I make this sticky?</td>
    <td colspan="8"></td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr  class="darkblue">
    <td class="sticky-row">Sticky Row 2<span>Dirty way of making sticky</span></td>
    <td class="sticky-row" colspan="9"></td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-row">Sticky Row 3</td>
    <td class="sticky-row" colspan="9">How can I make this sticky?</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
</tbody>
  </table>
</div>

关于javascript - 使用 colspan 在 <td> 上定位 Sticky？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54212865/

文章推荐： ssis - 如何在导入数据之前简单地清除表格？

文章推荐： slice - 了解 Frame-C 切片器结果

javascript - 为什么我不能使用 .colspan 设置该元素的 colspan？
根据我对 JavaScript 的理解，任何属性都可以使用 element.attribute = newValue 设置。因此，我尝试使用 element.colspan = 2 设置多个表格单元格
jquery - 使用 Jquery 将 Colspan = "2"替换为 Colspan = "4"
地点ID: 3 我想使用 JQuery 将第一个 TR 中未包含在完整页面中的第一个 Colspan="2"替换为 Colspan="4"。谢谢。最诚挚的问候，女士最佳答案这个 jQuery
html - 与 colspan ="2"和 .css "Select td with attribute colspan="2""连接的表格数据的中心文本
您好，我有一个表，其中一行中的某些列与 colspan="2" 属性相关联。此刻它看起来像这样: 我希望一行中连接的列的文本居中，但只有连接列中的文本该行的表格数据(无限制)有如下代码 u
javascript - 告诉表列的数量并将该数量作为顶部 colspan
我是否可以检查现有表中的列数并将其分配给该表 colspan 的顶部？ My code document.write('') document.write(' HEAD GRID ') for(i
javascript - Colspan 属性未从变量设置
我有一个表格，其中的单元格具有相同的值。我正在尝试使用 colspan 将它们合并在一起，但是为 colspan 设置属性没有任何效果。 https://jsfiddle.net/afn4f1q9/4
javascript - 左固定列与表 colspan
我已经使用了这个 .js 文件和以下方法。 https://code.jquery.com/jquery-3.3.1.js https://cdn.datatables.net/1.10.19/js/
html - 清除响应表中的 colspan
我有一个响应式表格(在可变 div 宽度内设置为 100% 宽度)，我试图在其中“重置”colspan，以便下一个表格行不会继承固定宽度 tds. 在我的示例中，数字 td(1 到 7)的固定宽度为
javascript - 单击按钮时调整 colspan
我的问题是，当我单击“span cell 1”按钮时，colspan 已正确完成，但头部 td 被扩展，并且随着表大小的增加，表布局受到干扰。它不能管理剩余的列吗？如果我单击跨度单元格 1 按钮，则
javascript - 在基于代码的数据表列设置中使用 colspan
这是第一个问题，所以请原谅我的任何错误。我正在使用 JQuery Datatables 插件，并且必须向表中添加两行带有 colspan 的列标题。在 HTML 中硬编码没有问题，但现在我在表初始化
jquery - colspan 的响应式数据表问题
我使用的是响应式数据表并且工作正常，但问题出在 colspan 上。当我使用带有 colspan 属性的 td 标签时，页面使用此链接引发错误 datatables warning table id
HTML 表格 Colspan
我正在使用以下 HTML 代码制作日历: Mon Tue Wed T
html - 表列更改行为取决于内容 (colspan)
我有一张带有 colspan 的表，但表现不佳。请比较以下 fiddle : http://jsfiddle.net/lucaswiener/WBdc8/ http://jsfiddle.net/l
html - 突出显示表格列 + colspan
jsfiddle 链接:http://jsfiddle.net/KMzjp/ 所以我试图根据表头 th 元素突出显示表列(有三个 th 元素，所以应该有三列，中间一列突出显示). 它在没有 colsp
HTML 拆分表格单元格而不是使用 colspan
我有一个包含很多行和列的表格。现在我想像这样将 td "E8"分成两列: 什么是最好的解决方案？最佳答案单向: 您可以在同一行的所有其他单元格上使用 rowspan="2" 例子:
html - Colspan 扰乱了表格布局
请看下面的html: Event Name City Date Price
html - 电子邮件中的表 colspan
我正在尝试使用 colspan 使图像与表格中的右侧对齐，并使带有文本的行在左侧对齐。当图像在左侧时，此方法通常有效，但现在我希望它在右侧，但它不起作用。请记住这是针对 outlook 电子邮件的，因
html - Colspan 行为异常
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-top
html - colspan 和图像不工作
帮助!我在这里拔头发。我正在尝试 a) 在此表的第一行和第三行中执行 colspan，但它似乎不起作用。我希望两行都跨越三列，并且 b) 我无法显示图像并且我已经在网上进行了广泛的搜索并且已经解决了我
javascript - 自动表格布局和 colspan
我正在创建一个应用程序，它允许用户通过添加和删除列和行、设置列宽和单元格列跨度以及将元素插入表格单元格来操作表格结构。在测试时，我遇到了一个场景，其中 Firefox 4 和 Internet Exp
PHPExcel - colspan 主题名称
表名:主题我的预期输出我的代码 setActiveSheetIndex(0); $headers = array('School Name'); $objPHPExcel->get

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 colspan 在上定位 Sticky？

首页

博学

6Ren·AI

商城

javascript - 使用 colspan 在 上定位 Sticky？

javascript - 使用 colspan 在上定位 Sticky？