html - 使表头保持固定位置，并保持最长td的宽度-6ren

html - 使表头保持固定位置，并保持最长td的宽度

转载作者：行者123 更新时间：2023-11-28 09:21:54

我只是想不通是什么问题，我有一个 HTML 表格，我想让表格标题保持在固定位置并保持最长 td 的宽度。我需要它用于脚本，并且第 th 个元素必须是固定宽度，没有 javascript 和简单的 CSS

    BODY {
      font-family: Arial;
      font-size: 8pt
    }
    .focim {
      margin-left: 400px;
      color: Black;
      font-family: Arial;
      font-size: 15pt;
      font-weight: 900;
      padding-bottom: 20px;
      text-decoration: underline
    }
    Time {
      color: Black;
      font-family: Arial;
      font-size: 10pt;
      font-weight: 500;
      padding-bottom: 20px
    }
    TABLE {
      border-width: 3px;
      border-style: solid;
      border-color: Black;
      border-collapse: collapse;
    }
    TH {
      font-family: Arial;
      font-size: 10pt;
      border-width: 1px;
      border-style: solid;
      border-color: Black;
      background: #b3b3b3;
    }
    TR:first-child {
      position: fixed;
      margin-top: 0px;
      white-space: nowrap;
    }
    TD {
      white-space: nowrap;
      border-width: 1px;
      padding: 3px;
      border-style: solid;
      border-color: Black
    }
    TD:first-child {
      background-color: #C19A6B;
      padding-right: 5px;
      padding-left: 5px
    }
    TR:nth-child(even) {
      background-color: #dddddd;
    }
    tr:hover td {
      background: #4E5066;
      color: #FFFFFF;
      border-top: 1px solid #22262e;
      border-bottom: 1px solid #22262e;
    }

<table>
  <colgroup>
    <col/>
    <col/>
    <col/>
    <col/>
  </colgroup>
  <tr>
    <th>Name</th>
    <th>IP_Addresses0</th>
    <th>Domain</th>
    <th>LocalPath0</th>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>



</table>

最佳答案

试试这个例子。

BODY {
  font-family: Arial;
  font-size: 8pt
}
.focim {
  margin-left: 400px;
  color: Black;
  font-family: Arial;
  font-size: 15pt;
  font-weight: 900;
  padding-bottom: 20px;
  text-decoration: underline
}
Time {
  color: Black;
  font-family: Arial;
  font-size: 10pt;
  font-weight: 500;
  padding-bottom: 20px
}
TABLE {
  border-width: 3px;
  border-style: solid;
  border-color: Black;
  border-collapse: collapse;
}
TH {
  font-family: Arial;
  font-size: 10pt;
  border-width: 1px;
  border-style: solid;
  border-color: Black;
  background: #b3b3b3;
}
TR:first-child {
  position: fixed;
  left: 10px;
}
TD {
  white-space: nowrap;
  border-width: 1px;
  padding: 3px;
  border-style: solid;
  border-color: Black
}
TD:first-child {
  background-color: #C19A6B;
  padding-right: 5px;
  padding-left: 5px
}
TR:nth-child(even) {
  background-color: #dddddd;
}
tr:hover td {
  background: #4E5066;
  color: #FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}

<table>
  <colgroup>
    <col/>
    <col/>
    <col/>
    <col/>
  </colgroup>
  <tr>
    <th>Name</th>
    <th>IP_Addresses0</th>
    <th>Domain</th>
    <th>LocalPath0</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>IP_Addresses0</th>
    <th>Domain</th>
    <th>LocalPath0</th>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>

  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>
  <tr>
    <td>name</td>
    <td>someip</td>
    <td>domain</td>
    <td>path</td>
  </tr>



</table>

关于html - 使表头保持固定位置，并保持最长td的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26055957/

文章推荐： jquery - 将转换与 li 一起使用时的奇怪行为

文章推荐： javascript jquery 选择单选按钮

文章推荐： javascript - JQuery setTimeout 上的旋转图标

文章推荐： css - 字体内的图标是否适合网站？

Clojure 映射-最长
我正在尝试编写一个名为 map-longest 的 Clojure 实用函数(感谢备用名称建议)。该函数将具有以下“签名”: (map-longest fun missing-value-seq c1
arrays - 最长 K 序贯递增子序列
为什么我创建了一个重复的线程我在阅读后创建了这个线程 Longest increasing subsequence with K exceptions allowed .我意识到提出问题的人并没有真
excel - VBA 最长 Collatz 序列
我正在编写一个 Sub 来识别 1 到 1000 之间最长的 Collatzs 序列。由于我刚刚开始学习 VBA，我想知道如何添加过程来计算每个序列的长度。 Sub Collatz() Dim i
excel - VBA 最长 Collatz 序列
我正在编写一个 Sub 来识别 1 到 1000 之间最长的 Collatzs 序列。由于我刚刚开始学习 VBA，我想知道如何添加过程来计算每个序列的长度。 Sub Collatz() Dim i
python - 最短、最长、平均持续时间 csv
我正在尝试减去 CSV 中的两列以创建第三列“持续时间”结束时间 - 开始时间每一行也对应一个用户 ID。我可以创建一个仅包含“持续时间”列的 csv 文件，但我宁愿将其重定向回原始 csv。例
raku - Peel 6 最长 token 匹配的非贪婪模式是不是一部分？
我在 2018.04 玩这个最长的 token 匹配，但我认为最长的 token 不匹配: say 'aaaaaaaaa' ~~ m/ | a+? | a+ /; # ｢a｣
python - 最长 200 字节字符串 - 数据库验证 max_length
因此，按照规范规定最终用户/应用程序提供的给定变量(200 字节)的字节长度。使用 python 字符串，字符串的最大字符长度是多少，满足 200 字节，因此我可以指定我的数据库字段的 max_le
jenkins - 如何获得 Jenkins (Jenkins)最长 build 时间的工作 list
我需要针对我们的Jenkins构建集群生成每周报告。报告之一是显示具有最长构建时间的作业列表。我能想到的解决方案是解析每个从属服务器(也是主服务器)上的“构建历史”页面，对于作业的每个构建，都解析该
ios - 对短视频(最长 15 秒)使用 HLS 是个好主意吗？
我正在构建一个 iOS 应用程序，它将流式传输最长为 15 秒的视频。我阅读了有关 HLS 的好文章，因此我一直在对片段大小为 5 秒的视频进行转码。如果视频的第一部分加载时间太长，那么我们可以在接下
regex - Perl 6 最长 token 匹配的 "additional tie breaker"是什么？
docs for Perl 6 longest alternation in regexes punt to Synopsis 5记录 longest token matching 的规则.如果不同的

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 使表头保持固定位置，并保持最长td的宽度