html - 卡住网站表格的首行-6ren

html - 卡住网站表格的首行

转载作者：太空宇宙更新时间：2023-11-04 11:55:59

我正在使用 Tableizer 将我的 Excel 工作表转换为 HTML 代码，然后粘贴到我的网站中。我正在尝试使我的表格可滚动。我不知道在哪里或如何插入此处列出的选项:Freezing/Fixing the Top Header Row of a table

谁能帮忙？？

这是我在 Tableizer.com 上的代码

table.tableizer-table {
  border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align:center;
} 
.tableizer-table td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #ccc;
  text-align:center;
}   
.tableizer-table th {
  background-color: #C61F13; 
  color: #FFF;
  font-weight: bold;
  text-align:center;
}

<table class="tableizer-table">
  <tr class="tableizer-firstrow"><th width="5%">District</th><th width="5%">Dlr Code</th><th width="20%">Dealer Name</th><th width="5%">Kia CPO Volume Obj</th><th width="5%">Current Standings</th><th width="5%">Enrolled</th><th width="5%">To Go</th></tr>
  <tr><td>CE01</td><td>IL001</td><td>ARLINGTON KIA IN PALATINE</td><td>30 </td><td>8</td><td>yes</td><td>22</td></tr>
  <tr><td>CE01</td><td>IL003</td><td>LIBERTY KIA</td><td>30 </td><td>2</td><td>yes</td><td>28</td></tr>
  <tr><td>CE01</td><td>IL035</td><td>NAPLETON'S KIA OF ELMHURST</td><td>32 </td><td>11</td><td>yes</td><td>21</td></tr>
  <tr><td>CE01</td><td>IL036</td><td>ROCK RIVER KIA</td><td>30 </td><td>0</td><td>no</td><td>30</td></tr>
  <tr><td>CE01</td><td>IL051</td><td>RAYMOND KIA</td><td>30 </td><td>3</td><td>yes</td><td>27</td></tr>
  <tr><td>CE01</td><td>IL054</td><td>GERALD KIA OF NAPERVILLE</td><td>30 </td><td>16</td><td>yes</td><td>14</td></tr>
  <tr><td>CE01</td><td>IL057</td><td>GARY LANG KIA</td><td>30 </td><td>11</td><td>yes</td><td>19</td></tr>
  <tr><td>CE01</td><td>IL058</td><td>CLASSIC KIA</td><td>30 </td><td>2</td><td>yes</td><td>28</td></tr>
  <tr><td>CE01</td><td>IL060</td><td>GROSSINGER KIA</td><td>30 </td><td>0</td><td>yes</td><td>30</td></tr>
  <tr><td>CE01</td><td>IL064</td><td>BOB ROHRMAN SCHAUMBURG KIA</td><td>30 </td><td>0</td><td>no</td><td>30</td></tr>
  <tr><td>CE01</td><td>IL071</td><td>GERALD KIA OF NORTH AURORA</td><td>30 </td><td>13</td><td>yes</td><td>17</td></tr>
  <tr><td>CE01</td><td>IL072</td><td>NAPLETON'S ELGIN KIA</td><td>30 </td><td>20</td><td>yes</td><td>10</td></tr>
  <tr><td>CE02</td><td>OH003</td><td>HALLEEN KIA</td><td>90 </td><td>54</td><td>yes</td><td>36</td></tr>
  <tr><td>CE02</td><td>OH016</td><td>WAIKEM KIA</td><td>30 </td><td>15</td><td>no</td><td>15</td></tr>
  <tr><td>CE02</td><td>OH025</td><td>TAYLOR KIA</td><td>37 </td><td>1</td><td>yes</td><td>36</td></tr>
</table>

最佳答案

没有真正漂亮的方法可以做到这一点。

您需要将您想要成为表头的内容从您的表格中取出并放入一个新表格中，并像下面那样设置它的样式。

总而言之，结果是这样的。

不过，您需要匹配您的列宽。

如果您的表格是整页，请告诉我，我可以向您展示一种方法来实现更大的表格。

here is a fiddle

table.tableizer-table {
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  width: 100%;
  height: 300px;
  overflow: scroll;
}
.tableizer-table td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #ccc;
  text-align: center;
}
.tableizer-table th {
  background-color: #C61F13;
  color: #FFF;
  font-weight: bold;
  text-align: center;
}
.headtbl {
  background-color: red;
}
.container {
  position: relative;
  width: 100%;
}
.tablearea {
  height: 300px;
  overflow-y: scroll;
}

<div class="container">
  <table class="headtbl">

    <tr class="tableizer-firstrow">
      <th width="5%">District</th>
      <th width="5%">Dlr Code</th>
      <th width="20%">Dealer Name</th>
      <th width="5%">Kia CPO Volume Obj</th>
      <th width="5%">Current Standings</th>
      <th width="5%">Enrolled</th>
      <th width="5%">To Go</th>
    </tr>
  </table>
  <div class="tablearea">
    <table class="tableizer-table">
      <tr>
        <td>CE01</td>
        <td>IL001</td>
        <td>ARLINGTON KIA IN PALATINE</td>
        <td>30</td>
        <td>8</td>
        <td>yes</td>
        <td>22</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL003</td>
        <td>LIBERTY KIA</td>
        <td>30</td>
        <td>2</td>
        <td>yes</td>
        <td>28</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL035</td>
        <td>NAPLETON'S KIA OF ELMHURST</td>
        <td>32</td>
        <td>11</td>
        <td>yes</td>
        <td>21</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL036</td>
        <td>ROCK RIVER KIA</td>
        <td>30</td>
        <td>0</td>
        <td>no</td>
        <td>30</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL051</td>
        <td>RAYMOND KIA</td>
        <td>30</td>
        <td>3</td>
        <td>yes</td>
        <td>27</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL054</td>
        <td>GERALD KIA OF NAPERVILLE</td>
        <td>30</td>
        <td>16</td>
        <td>yes</td>
        <td>14</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL057</td>
        <td>GARY LANG KIA</td>
        <td>30</td>
        <td>11</td>
        <td>yes</td>
        <td>19</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL058</td>
        <td>CLASSIC KIA</td>
        <td>30</td>
        <td>2</td>
        <td>yes</td>
        <td>28</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL060</td>
        <td>GROSSINGER KIA</td>
        <td>30</td>
        <td>0</td>
        <td>yes</td>
        <td>30</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL064</td>
        <td>BOB ROHRMAN SCHAUMBURG KIA</td>
        <td>30</td>
        <td>0</td>
        <td>no</td>
        <td>30</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL071</td>
        <td>GERALD KIA OF NORTH AURORA</td>
        <td>30</td>
        <td>13</td>
        <td>yes</td>
        <td>17</td>
      </tr>
      <tr>
        <td>CE01</td>
        <td>IL072</td>
        <td>NAPLETON'S ELGIN KIA</td>
        <td>30</td>
        <td>20</td>
        <td>yes</td>
        <td>10</td>
      </tr>
      <tr>
        <td>CE02</td>
        <td>OH003</td>
        <td>HALLEEN KIA</td>
        <td>90</td>
        <td>54</td>
        <td>yes</td>
        <td>36</td>
      </tr>
      <tr>
        <td>CE02</td>
        <td>OH016</td>
        <td>WAIKEM KIA</td>
        <td>30</td>
        <td>15</td>
        <td>no</td>
        <td>15</td>
      </tr>
      <tr>
        <td>CE02</td>
        <td>OH025</td>
        <td>TAYLOR KIA</td>
        <td>37</td>
        <td>1</td>
        <td>yes</td>
        <td>36</td>
      </tr>
    </table>
  </div>
</div>

关于html - 卡住网站表格的首行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30238581/

文章推荐： html - 倾斜容器 CSS 中的直背景图像

文章推荐： java - 获取导致规则执行的所有条件

文章推荐： java.lang.NoClassDefFoundError : javafxports. android.FXDalvikEntity$2

文章推荐： javascript - 如何在一个html标签中添加不同的css？

网站
我有这个网站，这个特定页面是安全的，但是当它回发时，它回发到一个不安全的页面。如何解决？我正在使用 ASP.NET 向导。我有这个页面 - checkout.aspx，页面包含这个控件 checko
redirect - 将 Azure 网站 URL 指向另一个 Azure 网站
我有 2 个 azure 网站 - 两个独立的项目我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
redirect - 将 Azure 网站 URL 指向另一个 Azure 网站
我有 2 个 azure 网站 - 两个独立的项目我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
java - 将 React 网站更改为同一域上的 java 网站，但仍显示 React 网站
环境: 旧网站: React 托管在 Heroku URL( http://sameurl.com ) 新网站: Java 托管在 Heroku URL ( http://sameurl.com )
asp.net - 将 ASP.NET 网站 + 数据库发布到 Windows Azure 网站
我已在 Windows Azure 上注册了一个测试帐户来对其进行测试。我构建了一个 Hello world ASP.NET Web 应用程序 + 数据库只是为了测试。我安装了 Visual Stu
performance - : {REST API, 网站} --> {数据库} 或 {网站} --> {REST API} --> {数据库} 哪个更好？
我有一个可以收集和显示各种测量值的产品(不会详细介绍)。正如人们所期望的那样，显示部分是一个数据库+建立在其之上的网站(使用 Symfony)。但是，我们可能还会创建一个 API 来向第三方公开数据
Android软键盘调整背景图片大小(网站)
这个问题在这里已经有了答案: Software keyboard resizes background image on Android (16 个答案) 关闭 8 年前。我有一个类似的问题:So
Maven Checkstyle 网站
这个问题似乎很常见，但我真的无法根据现有答案解决问题。我有一个简单的 maven 项目，没有任何复杂的部署配置等，并且想在点击“mvn site”时生成一个 Maven CheckStyle 报告。
Azure 网站 - 纵向扩展与横向扩展
有没有人看过有关何时进行横向扩展与纵向扩展的最佳选择的任何分析或信息。什么时候一个比另一个更有意义。目前，在标准模式和基本模式下，2 个小型实例的费用与 1 个中型实例的费用相同。拥有 2 个小型
Azure 网站。如何查找有关停止服务的日志
有没有办法找到 azure 网站何时停止？ (我通过门户网站停止了网站，但我不记得是什么时候......) 我正在寻找一些日志，但没有找到任何有用的内容。谢谢。最佳答案您拥有的最接近的是 azu
具有扩展和冗余功能的 Azure 网站
我目前在 Azure VM 的 IIS 中拥有一个网站。我已将该站点复制到 2 个可用区域中的 2 个虚拟机上。这可以保护网站免遭停机。我需要为高负载时刻实现一些可扩展性。这似乎就是创建音阶集的目
Azure CDN 网站
我有一个托管在 Azure 上的网站 ( http://mike-ward.azurewebsites.net/ )。我从 Azure 门户设置了一个指向(引用？)我的网站的 Azure CDN。根据
Azure 网站 - 识别主机插槽
我有一个 Azure 网站(不是 Web 角色)，有 2 个槽:生产和暂存。我只想为生产插槽启用 CDN，而不是为登台启用，问题是我找不到识别主机插槽的方法。 RoleEnvironment 不可用
javascript - 捕获浏览器内容的屏幕截图(网站)
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提出有关书籍、工具、软件库等建议的问题。您可以编辑问题，以便可以用事实和引用来回答它。 4年前关
Azure 网站 - 持久文件问题
我们正在考虑将一些网站从 Azure 云服务迁移到 Azure 网站(事情似乎就是这样进行的)。显然，我们被明确告知云服务不会保留文件系统状态，因为它们会在机器故障时重新部署。我假设网站是基于 Bl
连接到虚拟机的 Azure 网站
我有一个 Azure 网站，需要使用在 VM 上运行的 Elasticsearch 服务。虽然我需要能够锁定对 Elasticsearch 的访问，以便只有 Azure 网站可以访问它，但我似乎无法
Azure 网站 DNS
我有一个 azure 网站，位于 yis3.azurewebsites.net - 我已将其提升为“共享”网站，以便我可以使用自定义域。我拥有从 123-reg.co.uk 购买的域名 yorkshi
Azure 网站 - 如何写入文件
我正在使用 abcPDF 动态创建 PDF。我想保存这些 PDF，以便客户随时检索。最简单的方法(也是我现在在当前服务器上所做的方法)是将完成的 PDF 保存到文件系统。看来我一直坚持使用 blo
Azure 网站 - 监控数据
我们正在尝试了解 Windows Azure 管理 API 为 Azure 网站(而非 Webroles)返回的监控数据的复杂性例如，下图描述了为 CPUTime 检索的数据点。它似乎表明，在晚上
具有多个站点的 Azure 网站
看起来真的很愚蠢，因为我找不到它: 门户网站似乎不太直观，我如何为一个“网站”付费并在其中运行最多 500 个网站？我想当我通过单击左下角的加号添加“网站”时，我添加了整个虚拟机而不是子站点。如何仅添

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 卡住网站表格的首行