html-table 相关问题

如何在具有边框折叠的表格中避免边框折叠：折叠？

我正在制作一个表格，我希望第一列和最后一列是粘性的。这部分我已经处理好了（我使容器可调整大小，这样您就可以让滚动条看到它。） 我的亲...

主体宽度不会自动延伸至桌子宽度

看看这个例子： http://denise.brixwork.com/showlisting/1/8297-Valley-Drive-Alpine-Meadows-Whistler-denise-brown-real-estate 而“规格”下的红色表格并不是因为...

有没有办法用纯CSS将行内容变成列？

我有一张这样的桌子： 在大屏幕上 我有一张这样的桌子： <p>On large screens</p> <table> <tr> <td>1</td> <td>3</td> <td>5</td> </tr> <tr> <td>2</td> <td>4</td> <td>6</td> </tr> </table> 有没有办法纯粹用CSS修改成LOOK这样？ （单列，其中每个奇数项都来自第一行，每个偶数项来自第二行） <p>On small screens</p> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> 我尝试使用 display: contents; 但显然，由于某种原因它不适用于 <tr>-s。关于我应该如何处理这个问题有什么想法吗？另外，我只能使用纯 (S)CSS。行数和列数是动态的。 使用 CSS 网格，如下所示 table { display: grid; } table > *, /* you need to target the "tbody" as well as "tr" */ table tr { display: contents; } td:nth-child(1) {order:1} td:nth-child(2) {order:2} td:nth-child(3) {order:3} <p>On large screens</p> <table> <tr> <td>1</td> <td>3</td> <td>5</td> </tr> <tr> <td>2</td> <td>4</td> <td>6</td> </tr> </table> 1 3 5

`box-shadow` 无法在 Chrome 中与 `border-collapse` 和 `position:relative` 结合使用

我有一个带有数据的。由于风格原因，它有边框折叠。 在该表中， 元素具有position:relative，因为我希望它们有一个工具提示（我实现了 vi... 我有一个带有数据的<table>。由于风格原因，它有border-collapse。 在该表中，<td>元素具有position: relative，因为我希望它们有一个工具提示（我通过子<div>和position: absolute实现）。 在 Chrome 中，除非我删除 box-shadow 或 <td>（我不想删除，因为出于上述原因我需要它们），否则 border-collapse 的 position: relative 不起作用。我该如何解决这个问题？它在 Firefox 中运行良好。 这是一个小例子： table { border-collapse: collapse; } td { position: relative; box-shadow: 0 0 10px black; } <table> <tr> <td>This has a shadow in Firefox but not in Chrome</td> </tr> </table> 对于质疑 position: relative 的人，这里有一个更长的示例，其中删除 position: relative 会破坏工具提示所需的功能： table { border-collapse: collapse; } td { position: relative; box-shadow: 0 0 10px black; border: 1px solid black; } div { visibility: hidden; position: absolute; background-color: #ff5555; z-index: 1000; right: 0; /* -1px looks inconsistent across columns :( */ top: 100%; /* pixel-perfect */ padding: 5px; border: 1px solid black; } td:hover>div { visibility: visible; } <table> <tr> <td>Hover your mouse cursor here <div>tooltip</div> </td> </tr> <tr> <td>Shadow is missing in Chrome</td> </tr> </table> 这是 Chrome 中 border-collapse、position: relative 和 box-shadow 组合的已知问题。 原始解决方案 表格行上的框阴影未出现在某些浏览器上 以下是修改 CSS 的方法： table { border-collapse: collapse; } td { position: relative; box-shadow: 0 0 10px black; transform: scale(1); } div { visibility: hidden; position: absolute; background-color: #ff5555; z-index: 1000; right: 0; top: 100%; padding: 5px; border: 1px solid black; } td:hover>div { visibility: visible; }

选择第一行中的第三个元素（webdriver.io 和 javascript）类型错误：tables.$ 不是函数错误

我正在使用 cucumber、webdriver.io 和 javascript，并且必须选择第一行中的第三个元素。表元素不断变化，但始终以“__table”开头，因此我合并了...

CSS 移动表格显示与空表格单元格冲突

我正在一个用 PHP 编写的网站的表格上使用下面的 CSS（Drupal，但也尝试过另一个直接的 html 表格）。这用于使表格在移动设备上看起来更美观......

DataTables JS 求和问题，只有在过滤掉不等于的其他列后才对所有数据求和

经过多次尝试，我得到了这段代码...我不明白的是如何通过搜索没有值“Cerere”或“Anulat”的列并使用过滤后的内容来对列应用过滤器。 ..

表格行上带有背景颜色的圆形表格

我有一个圆形的 html 表格，如下所示： 现在我想为每隔一行添加背景颜色，因此我添加了以下 CSS，但结果看起来不正确。背景颜色出现...

HTML 表格未填充

我使用 Google 脚本创建了一个网络应用程序。它目前按我想要的方式工作，没有例外。在网络应用程序上，我尝试创建一个表格，其中填充来自谷歌工作表的数据并编辑/

如何将动态表格设置为可滚动的动态固定大小，由视口和相邻 div 确定？

我正在使用 Preact 与 Tailwind 和 daisyUI 来制作我的应用程序。这个想法是屏幕将有两个选项卡，每个选项卡左侧有一个文本区域，右侧有说明/结果。 我使用 daisyUI 的...

ReactJS 和 MaterialUI：表格所有列的宽度相等

使用ReactJS和MaterialUI我试图让表格的所有列具有相同的宽度。 当我没有设置任何宽度时，我希望将此作为默认行为，但事实并非如此：l...

使用 TCPDF 创建 pdf 时，表头和正文在第二页中未对齐

我想用 TCPDF 生成一张发票，其中包含一个取决于项目大小的动态表。它工作正常，直到表格大小不超过第一页。从第二页开始...

Javascript HTML 条件显示行表失去表列对齐

HTML/Javascript 专家您好， 我需要在浏览器中渲染大型表格（至少几百行）。 为了帮助导航，我想通过检查按钮来打开和关闭行的子集...

带有边框半径和粘性标题的 HTML 表格

我有一个 HTML ，带有边框半径和使用位置的粘性标题：sticky，如下所示： https://codepen.io/muhammadrehansaeed/pen/OJpeeKP 但是，当使用 滚动时 我有一个带有 <table> 的 HTML border-radius 和使用 position: sticky 的粘性标题，如下所示： https://codepen.io/muhammadrehansaeed/pen/OJpeeKP 但是，当使用粘性标题滚动时，表格行会伸出粘性标题的圆角所在的位置。请参阅此图片的左上角： 有没有办法可以在使用粘性标题向下滚动时保持圆角，或者在标题变得粘性并从原始位置向下移动时删除粘性标题？理想情况下，我想要一个CSS解决方案。 您可以使用伪元素隐藏边框的某些部分： table thead th:first-child::before, table thead th:last-child::after { width: 1px; height: 5px; background: white; content: ""; display: block; position: absolute; top: 0px; } table thead th:first-child::before { left: -1px; } table thead th:last-child::after { right: -1px; } 正如Ivan建议的那样，似乎使用伪元素来覆盖标题下方不需要的边框是（令人惊讶的）唯一可行的选择。我建议使用伪不仅用于覆盖“外部”区域，而且还用于绘制弧线和填充“内部”区域。可以使用堆叠背景来做到这一点。应用于原始代码： /* § Additions / Changes */ table thead th { position: relative; } /* Pseudos exceeding header boundary by border width; with rectangle covering half circle and rest of height */ table thead th:last-child::after, table thead th:first-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--global-border-width-1)); width: var(--global-border-radius); background-image: linear-gradient(to bottom, transparent var(--global-border-radius), var(--global-title-color) 0), radial-gradient(circle at var(--global-border-radius) var(--global-border-radius), var(--global-title-color) var(--global-border-radius), var(--global-content-background-color) 0); background-position: top left; background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter); background-repeat: no-repeat; } table thead th:last-child::after { left: auto; right: calc(-1 * var(--global-border-width-1)); background-position: top right; } /* § Declarations and original style */ html { --global-content-background-color: white; --global-title-color: black; --global-background-color: lightblue; --global-border-color: black; --global-border-radius: 20px; --global-border-width-1: 10px; --global-space-fixed-2: 10px; --global-space-fixed-3: 15px; --global-border-diameter: calc(2 * var(--global-border-radius)); background-color: var(--global-content-background-color); } table { color: var(--global-title-color); background-color: var(--global-content-background-color); border-collapse: separate; border-color: var(--global-title-color); border-style: solid; border-radius: var(--global-border-radius); border-width: 0 var(--global-border-width-1) var(--global-border-width-1) var(--global-border-width-1); border-spacing: 0; width: 100%; } table thead { position: sticky; top: 0; z-index: 10; } table thead th { color: var(--global-background-color); background-color: var(--global-title-color); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: bottom; } table tbody td { border-top: var(--global-border-width-1) solid var(--global-border-color); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: top; } table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--global-border-radius); } table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--global-border-radius); } /* § Unrelated / demo */ * { scroll-margin-top: calc(var(--global-space-fixed-2) * 4 + 1rem); /* = height of sticky thead + top padding of cell, provided text in thead does not wrap */ scroll-margin-bottom: 1em; } td { height: 60vh; } td a { float: right } tr:last-child td { vertical-align: bottom; } a[name]:empty::before { content: attr(name); } th:not(#\0):hover::before { background-image: linear-gradient(to bottom, transparent var(--global-border-radius), #0F08 0), radial-gradient(circle at center, #00F8 var(--global-border-radius), #F2F4 0); background-position: top left; background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter); } <table> <thead> <tr> <th>Fake non-transparent "border-radius"</th> </tr> </thead> <tbody> <tr> <td> <a href="#⬆️" name="⬇️"></a> For fixed header</td> </tr> <tr> <td> <a href="#⬇️" name="⬆️"></a> Using CSS stacked background images in pseudo elements</td> </tr> </tbody> </table> 只需从表格中删除边框，并为表格主体中的第一个和最后一个表格单元格添加左右边框： tbody td:first-child { border-left: 1px solid black; } tbody td:last-child { border-right: 1px solid black; } tbody tr:last-child td{ border-bottom: 1px solid black; } tbody tr:last-child td:first-child { border-bottom-left-radius: 2px; } tbody tr:last-child td:last-child { border-bottom-right-radius: 2px; } 当然是使用适当的缩进、嵌套和变量！ 使用许多伪选择器看起来样式相当丑陋，但似乎可以解决您的问题。 有一个更紧凑的解决方案。只需将具有背景颜色的框阴影添加到第一个 < th > 和最后一个 < th > 即可隐藏元素。 在此示例中，在右侧，您可以看到表格行由于边框半径而可见。在左边，我应用了盒子阴影。 盒子阴影：0 -2.1rem 0 .6rem #E5E7EB； 在这里，它是灰色的，以便您可以看到它的工作原理，但您只需使用与背景相同的颜色即可使其完全不可见。 这是最终结果以及我正在使用的代码： th:第一个孩子 { 边界半径：0.75rem 0 0 0； 左边框：.1rem 实心 $color-gray-200； 框阴影：0 -2.1rem 0 .6rem $color-gray-200； } th：最后一个孩子{ 边界半径：0 0.75rem 0 0； 右边框：.1rem 实心 $color-gray-200； 盒子阴影：1rem -2.1rem 0 .6rem $颜色白色； } 可能需要调整框阴影以隐藏基于所选边框半径的行。 不确定你是否熟悉jquery，如果熟悉的话你可以在滚动内容时动态更改 border-top-left-radius: 等于粘性标题的半径，但这对于新手来说有点棘手jquery/JS。 其次，您可以将粘性标题封闭到父级（例如class="parent")），并将父级背景设置为白色，没有边框。并保持粘性标题的边框半径不变。因此，当您滚动内容时将位于该父级下方（例如 class="parent"）。为了确保父级出现在该行上方，您可以给出 z-index: 10

使用 R 读取 html 格式的表格

我使用rvest::read_html读取html格式的表格。 html 文件只是一个表格。 这是我的代码。 图书馆（rvest） pp = read_html("Batch1_Parameters.html") %>% html_table() 噗……

在添加新行时刷新 html 可编辑表格 - Bootstable

我使用 boostable 插件在运行时内联编辑 HTML 行。该插件位于 https://www.jqueryscript.net/table/Editable-Tables-jQuery-Bootstrap-Bootstable.html。问题是现在当我想要的时候

如何更改antd表格选中行背景颜色

我在我的 React 应用程序中使用带有复选框的 antd 表 我想更改所选表格的背景 常量列 = [ { 标题：'姓名'， 数据索引：'名称'， }, { ...

如何在javascript中将动态HTML表格存储到localStorage

这里有新编码员。我有一个动态 html 表，其中包含用户输入的详细信息以及他们输入详细信息的时间。但我需要存储数据，即使我刷新或关闭浏览器，它也会重新...

如何通过循环文件名数组来扩展 HTML 表格？

我对 HTML 很陌生。我知道如何添加表格行和单元格，以及如何通过路径插入图像。现在我已经通过Python和matplotlib生成了一堆图形的图像文件，并对它们进行了排序...

从右到左打印表格单元格

我制作了一个表格，并希望第一个单元格从右侧开始，而不是默认从左侧开始。 我尝试更改 CSS 中的 float 属性，但似乎没有帮助。 这是代码： 我制作了一个表格，并希望第一个单元格从右侧开始，而不是默认从左侧开始。 我尝试更改 CSS 中的 float 属性，但似乎没有帮助。 这是代码： <table border="0" width="100%" cellspacing="0" align="center" class="result_table"> <tr align="right"> <th bgcolor="#cccccc" align="right">1</th> <th bgcolor="#cccccc" size="17">2</th> <th bgcolor="#cccccc">3</th> <th bgcolor="#cccccc">4</th> </tr> </table> <style> table.result_table { float:right; } </style> 任何人都可以建议一种方法来改变这张桌子的浮动吗？ 正如评论中所建议的，您可以将方向性设置为从右到左（RTL）。但是，除非您的表格内容采用从右到左的语言，否则您还应该将表格内容元素中的方向性设置为从左到右。否则，它们继承 RTL 方向性，这在许多情况下会引起意外，因为方向性还设置整体文本方向性。这不会影响西方语言的正常文本，但会影响例如像“4 (5)”这样的内容，在 RTL 方向性下会显示为“(5) 4”。 因此，您应该设置 table.result_table { direction: rtl; } table.result_table caption, table.result_table th, table.result_table td { direction: ltr; } 有一种更简单的方法。您可以将 dir="rtl" 添加到表格中。 <table dir="rtl"> ... </table> 或者您可以使用 CSS 而不是使用 HTML 属性： <table style="direction:rtl"> ... </table> 我不确定这是否可以仅使用 CSS 来实现。如果使用 jQuery 适合您，这里有一个起始想法，可能会让您获得所需的结果： CSS： .result_table{float:left; width:100%; border-collapse:collapse; padding:0;} .result_table th{float:right; padding:0;} JS： var cols = $('.result_table th').length; var colWidth = 100 / cols; $('.result_table th').css({width:colWidth+'%'}) 示例 - jsFiddle