程序员经验分享-hwhale

如何使用 CSS 使 100% 宽度的 HTML 表格的列可调整大小（导致使用截断文本...，并在悬停时显示文本）

2024-01-21

简洁版本

运行下面的代码片段（跳过代码；如果可以的话我会折叠它）：

table.listview {
  background-color: #fcfcfc;
  color: #061616;
  white-space: nowrap;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid black;
  margin: 0;
  width: 100%;
}

.listview caption {
  text-align: left;
  font-family: Georgia, "Times New Roman", serif;
  color: DarkGreen;
  background: transparent;
  padding: 0.375em 0.25em 0.5em 0;
  font-variant: small-caps;
}

.listview thead {
  background-color: ButtonFace;
}

tr:hover {
  background: #E5F3FF;
}

.listview th {
  background-color: ButtonFace; /*requird to make sticky work*/
  color: black;
  font-weight: normal;
  border-bottom: 1px solid #d5d5d5;
  border-right: 1px solid #dedfe7;
  resize: horizontal;
  overflow: hidden; /* required to make resize work */
  text-align: left;
  padding-left: 0.5em;
  position: sticky;
  top: 0; /* required to make sticky work ( https://stackoverflow.com/a/43707215) */
}

.listview th:hover {
  background: #dde9f6;
  background: linear-gradient(180deg, #e8f4ff 0%, #e8f4ff 36%, #c0e9ff 36%, #bbe4fd 100%);
  border-right: 1px solid #6bb8e6;
  border-bottom: 1px solid #99c6e3;
}

.listview td {
  padding-left: 0.3em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listview td:hover {
  overflow: visible;
  white-space: unset;
}
<TABLE class="listview">
  <CAPTION>Unit Tests</CAPTION>
  <THEAD>
    <TR>
      <TH>Class</TH>
      <TH>Method</TH>
      <TH>Test result</TH>
      <TH>Error</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>highMountain.ToolkitTests</TD>
      <TD>testGetSwervingBearings</TD>
      <TD>Success</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testgetMilfordTrunnions</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testupdateMilfordTrunnionsTotals</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testlockMilfordTrunnionForMachining</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testfetchHydrocopticMarselvanes</TD>
      <TD>Success</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testGetLunawaineShaft</TD>
      <TD>Success</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testresumeMachining</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testsavePanametricFanPositions</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testloadPanametricFanPositions</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testgetTurboEncabulatorStatistics</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testgetTurboEncabulatorBaseRunTime</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testgetTurboEncabulatorDuration</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testpauseSinusoidalDepleneration</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testpassSemiboloid</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>teststartSemiboloidSlots</TD>
      <TD>Failed</TD>
      <TD>Optional[com.microsoft.sqlserver.jdbc.SQLServerException: Invalid column name 'TurboEncabulator'.]</TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>teststopSemiboloidSlots</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testaddSemiboloidSlots</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testGetActiveTremmyPipe</TD>
      <TD>Success</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testGetTremmyPipe</TD>
      <TD>Failed</TD>
      <TD>Optional[java.lang.Exception: Hibernate Session connection does not wrap type: java.sql.Connection]</TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testaddTremmyPipe</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testgetTremmyPipeHasHydrocopticVanesAddedThisPatametricFan</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
  </TBODY>
</TABLE>

请注意这是多么可怕：

  • 列表视图比屏幕宽
  • 您必须水平滚动才能看到所有列
  • 即使表头有调整大小的夹具
  • 他们不工作

我想弄清楚如何让它更好地工作（即像 ListView 一样）

长版

我正在尝试设置 HTML 表格的样式，使其表现得像列表视图：

  • 列表视图标题保持可见（position: sticky）当你向下滚动时：complete
  • 单元格中的文本现在不应换行（white-space: nowrap): complete
  • 溢出文本应替换为省略号（text-overflow: ellipsis): complete?
  • 将鼠标悬停在截止文本上应该会显示它（td:hover { overflow: visible; white-space: unset;}): complete?
  • 列表视图是width: 100% wide: fail
  • 列的大小是可调整的（resize: horizontal; overflow: hidden;): fails

除了我无法工作的重要部分：可调整大小的较窄的列和截断长文本并将其替换为省略号。

换句话说，我希望它的外观和行为如下：

研究工作

  • 如何实现文本溢出：具有灵活列的 HTML 表中的省略号 https://stackoverflow.com/questions/53673075/how-to-achieve-text-overflow-ellipsis-in-a-html-table-with-flexible-columns
  • 如何调整 html 表格列的大小？ https://stackoverflow.com/questions/41674548/how-to-make-html-table-columns-resizable
  • CSS 文本溢出：省略号；不工作？ https://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working
  • 如果文本长于表格单元格宽度，则将文本截断到最后一个单词 https://stackoverflow.com/questions/46652612/cut-off-text-to-the-last-word-if-longer-than-table-cell-width
  • 如何在 HTML 表格中使用省略号？ https://stackoverflow.com/questions/71916426/how-can-i-make-ellipsis-work-in-an-html-table
  • HTML 表格截断长文本并在悬停/单击时显示全文 https://stackoverflow.com/questions/59286359/html-table-cut-off-long-text-and-show-full-text-on-hover-click
  • 表列文本溢出省略号（宽度以 % 为单位） https://stackoverflow.com/questions/11116739/table-column-text-overflow-ellipsis-width-in
  • CSS 文本省略号和 100% 宽度 https://stackoverflow.com/questions/27314149/css-text-ellipsis-and-100-percent-width
  • 表格单元格中的 CSS 文本溢出？ https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell
  • 隐藏某些文本字符串并用省略号替换 - 悬停时显示 https://stackoverflow.com/questions/32079039/hide-certain-string-of-text-and-replace-with-ellipsis-show-on-hover
  • 如何允许宽度为 100% 的 CSS 表格列溢出表格？ https://stackoverflow.com/questions/47445113/how-can-i-allow-a-css-table-column-with-width-100-to-overflow-table
  • CSS隐藏具有不同宽度列的表格上的溢出文本 https://stackoverflow.com/questions/17604139/css-hide-overflow-text-on-a-table-with-different-width-columns
  • 宽度 100% 元素中的文本溢出省略号实现 https://stackoverflow.com/questions/62218066/text-overflow-ellipsis-implementation-in-width-100-element

让可调整大小的列发挥作用的关键是设置table-layout: fixed https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout这使用第一行的宽度来设置表格列的宽度。然后，为了使截断正常工作，添加overflow: hidden to the tds。使文本在悬停时可读是困难的部分，我选择使用 JavaScript 来设置title每个属性td与元素.innerText这给出了您在图像中说明的效果，并且您不需要.listview td:hover风格声明。

document.querySelectorAll('td').forEach(td => td.title = td.innerText)
table.listview {
  background-color: #fcfcfc;
  color: #061616;
  white-space: nowrap;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid black;
  margin: 0;
  width: 100%;
  table-layout: fixed;
}

.listview caption {
  text-align: left;
  font-family: Georgia, "Times New Roman", serif;
  color: DarkGreen;
  background: transparent;
  padding: 0.375em 0.25em 0.5em 0;
  font-variant: small-caps;
}

.listview thead {
  background-color: ButtonFace;
}

tr:hover {
  background: #E5F3FF;
}

.listview th {
  background-color: ButtonFace;
  /*requird to make sticky work*/
  color: black;
  font-weight: normal;
  border-bottom: 1px solid #d5d5d5;
  border-right: 1px solid #dedfe7;
  resize: horizontal;
  overflow: hidden;
  /* required to make resize work */
  text-align: left;
  padding-left: 0.5em;
  position: sticky;
  top: 0;
  /* required to make sticky work ( https://stackoverflow.com/a/43707215) */
}

.listview th:hover {
  background: #dde9f6;
  background: linear-gradient(180deg, #e8f4ff 0%, #e8f4ff 36%, #c0e9ff 36%, #bbe4fd 100%);
  border-right: 1px solid #6bb8e6;
  border-bottom: 1px solid #99c6e3;
}

.listview td {
  padding-left: 0.3em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.listview td:hover {}
<TABLE class="listview">
  <CAPTION>Unit Tests</CAPTION>
  <THEAD>
    <TR>
      <TH>Class</TH>
      <TH>Method</TH>
      <TH>Test result</TH>
      <TH>Error</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>highMountain.ToolkitTests</TD>
      <TD>testGetSwervingBearings</TD>
      <TD>Success</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testgetMilfordTrunnions</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testupdateMilfordTrunnionsTotals</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testlockMilfordTrunnionForMachining</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testfetchHydrocopticMarselvanes</TD>
      <TD>Success</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testGetLunawaineShaft</TD>
      <TD>Success</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testresumeMachining</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testsavePanametricFanPositions</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testloadPanametricFanPositions</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testgetTurboEncabulatorStatistics</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testgetTurboEncabulatorBaseRunTime</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testgetTurboEncabulatorDuration</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testpauseSinusoidalDepleneration</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testpassSemiboloid</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>teststartSemiboloidSlots</TD>
      <TD>Failed</TD>
      <TD>Optional[com.microsoft.sqlserver.jdbc.SQLServerException: Invalid column name 'TurboEncabulator'.]</TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>teststopSemiboloidSlots</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testaddSemiboloidSlots</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testGetActiveTremmyPipe</TD>
      <TD>Success</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testGetTremmyPipe</TD>
      <TD>Failed</TD>
      <TD>Optional[java.lang.Exception: Hibernate Session connection does not wrap type: java.sql.Connection]</TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testaddTremmyPipe</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
    <TR>
      <TD>contoso.grobber.frobberGrob</TD>
      <TD>testgetTremmyPipeHasHydrocopticVanesAddedThisPatametricFan</TD>
      <TD>No checks performed</TD>
      <TD></TD>
    </TR>
  </TBODY>
</TABLE>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

htmltable

如何使用 CSS 使 100% 宽度的 HTML 表格的列可调整大小（导致使用截断文本...，并在悬停时显示文本） 的相关文章

随机推荐

  • Scala Future 带有过滤器以供理解

    在下面的示例中我得到了异常java util NoSuchElementException Future filter predicate is not satisfied 我想要结果Future Test2 当检查if i 2 失败 如何

  • 如何将关系型数据库映射到OWL？

    我正在尝试将关系数据库映射到 OWL 这是我的 2 张桌子 学生 student id student name course id 课程 课程ID 课程名称 id name course id 1 Adam 5 2 Michael 2 c

  • PHP 函数以 & 符号开头是什么意思？

    我正在使用 Facebook 库 其中包含以下代码 class FacebookRestClient public function users hasAppPermission ext perm uid null return this

  • 显示：表格在 ie6 和 ie7 中不起作用 [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我创建了一个菜单 但它在 ie6 和

  • XA 数据源的性能开销 - 最佳实践

    我试图了解 XA 数据源对性能的影响 在许多应用程序中 并非所有事务都需要参与分布式事务 意味着只有少数事务需要与其他资源一起分发 参与 性能权衡是否足够高 足以配置两个数据源 XA 和非 XA 各一个 同样 答案是 这取决于场景 但我正在

  • 在 Julia 中声明主函数/入口点

    是否有一种现成的或惯用的方法来声明 Julia 程序中的入口点 即相当于main在 C 或if name main 在Python中构造 这似乎是一个重要的功能 以便编写较大的结构化代码 这些代码不会在交互模式下使用 但我找不到任何关于如何

  • 如何将两个列表中的元素组合到第三个列表中？

    我有两个清单a and b a 3 6 8 65 3 b 34 2 5 3 5 c gets 3 34 6 2 8 5 65 3 3 5 是否有可能在Python中获得它们的比率 就像在变量中一样c above I tried a b并得到

  • 如何使 Perl 的 File::Find 更快？

    我有一个名为Lib我正在使用 File Find 模块在整个目录中搜索该文件夹 D 搜索需要很长时间 如果驱动器有很多子目录 甚至需要 5 分钟 我怎样才能更快地搜索该库 以便在几秒钟内完成 我的代码如下所示 find Lib files

  • 带有 SVG 图像的 CSS 光标指针

    我正在尝试将自定义光标指针与 SVG 图像一起应用 但它不起作用 相反 如果我使用 png 图像 则一切正常 这是我的代码 container not working one cursor url images icon cross svg

  • 如何删除“打开应用程序 tumblr”消息？

    我对使用 tumblr 写博客感兴趣 并且发现了一个令人惊叹的响应式主题 但我想知道是否可以删除 在 Tumblr 应用程序中打开 消息 以及如何做到这一点 打开应用程序tumblr https i stack imgur com T1K4

  • 在 Android 中将 Parcelable 对象存储到文件中

    我试图将 ResolveInfo 对象的 ArrayList 存储到文件中 这样我就不必在每次应用程序启动时重建它 大约 4 6 秒 ResolveInfo 对象是可 Parcelable 但不是可序列化的 所以我得到一个 java io当

  • OpenCV 中的快速颜色量化

    如何使用 OpenCV C 以最快的方式减少图像中不同颜色的数量 我不想要完整的代码 我已经使用 kmeans 做到了 但速度不是很快 这是我的代码中速度较慢的部分 kmeans samples clusterCount labels Te

  • 在 HTML 中刷新页面时强制页面滚动位置到顶部

    我正在建立一个我正在发布的网站divs 当我在页面滚动到位置 X 后刷新页面时 页面将以滚动位置 X 加载 如何在页面刷新时强制页面滚动到顶部 我能想到的是一些 JS 或 jQuery 运行为onLoad 页面的功能为SET页面滚动到顶部

  • 显示 Rownum 问题 MySQL

    我有这个查询 SET row num 0 SELECT SELECT row num row num 1 AS itempurchase code SELECT supplier code FROM qa items purchases a

  • 错误：QOpenGLShader：无法创建着色器 - 使用 Qt5.2 Mingw OpenGL 编译 QtQuick 应用程序时

    我已经下载并安装了 Qt 5 2 mingw opengl 和 x86 版本 当我使用这个版本的 Qt 运行 Qt 项目时 没有问题 但是当我运行 Qt Quick 应用程序时 程序崩溃并在调试中记录以下消息 getProcAddress

  • 如何使用 Ruby 1.9 检测字符串是否仅包含拉丁符号？

    我需要检测某些字符串是否包含非拉丁字母表中的符号 数字和特殊符号 例如 很好 我需要知道是否有任何非拉丁符号 例如 123sdjjsf 4KSD just latin 应该返回true 12333 4 sdf just latin 应该返回

  • macbook pro 15" 的媒体查询

    我正在尝试对 15 英寸及以下笔记本电脑应用媒体查询 但没有成功 这是我的媒体查询 media screen and min device width 1200px and max device width 1600px and webki

  • 控制virtualenv中的pip版本

    如何控制版本pip用于新创建的venv https docs python org 3 library venv html 默认情况下 它使用销售点分布 https github com python cpython tree master

  • Tensorflow 抓取高于阈值的预测和指数

    基于高于某个阈值的预测值和指数 最简单的方法是什么 考虑这个问题 sess tf InteractiveSession predictions tf constant 0 32957435 0 82079124 0 54503286 0 5

  • 如何使用 CSS 使 100% 宽度的 HTML 表格的列可调整大小（导致使用截断文本...，并在悬停时显示文本）

    简洁版本 运行下面的代码片段 跳过代码 如果可以的话我会折叠它 table listview background color fcfcfc color 061616 white space nowrap border collapse s

热门标签