html-table 相关问题

由于它与HTML有关，因此表格用于以表格方式显示数据。关于HTML表的问题应该通过显示有问题的源代码来询问，或者，如果问题是关于根据需求创建表失败的尝试，提问者需要显示失败的尝试，描述期望和行为如何不同。

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

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

php html pdf html-table tcpdf

回答 1 投票 0

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

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

javascript html-table conditional-rendering

回答 1 投票 0

带有边框半径和粘性标题的 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

html css html-table css-position sticky

回答 5 投票 0

使用 R 读取 html 格式的表格

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

r html-table rvest

回答 1 投票 0

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

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

javascript html html-table

回答 2 投票 0

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

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

reactjs html-table antd

回答 1 投票 0

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

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

javascript html dynamic html-table local-storage

回答 1 投票 0

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

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

python html for-loop html-table

回答 1 投票 0

从右到左打印表格单元格

我制作了一个表格，并希望第一个单元格从右侧开始，而不是默认从左侧开始。我尝试更改 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

html css html-table right-to-left

回答 3 投票 0

使用 html 垂直对齐表格

如何垂直对齐表格？以便 546号彩票1 在链接元素列下对齐 547号彩票2 属于 Linked Element1 列 548号彩票3 跌落...

html css html-table

回答 1 投票 0

CTkFrame rowspan 运行不正确并且与正常的 tk.Frame 不同

我有几个框架，每个框架配置为 1 列和 30 行。我想在其中显示几个框架，每个框架通过 rowspan 跨越不同数量的行。然而，当我设定...

python tkinter html-table customtkinter

回答 1 投票 0

覆盖html css中的span并使用TD

我在内有一个span标签。在中，我使用类设置字体。然而，span 有自己的字体样式。我想覆盖 span 标签中的字体样式，并且...