html-table 相关问题

html：向表格添加多级标题

我是 HTML 新手。我有一个这样的表： 我想将此图像转换为 html 表。我尝试了这个，但它不起作用： <... 我是 HTML 新手。我有一张这样的桌子： 我想将此图像转换为 html 表格。我尝试了这个，但它不起作用： <table> <tr> <td>value</td> <td>value</td> <td>value</td> <td>value</td> </tr> <tr> <td>value</td> <td><table width="350" border="1"> <tr> <td> <table> <tr><td>value</td></tr> <tr><td>value<br>value <br>value<br>value<br></td></tr> </table> </td> <td>value</td> <td>value</td> <td>value</td> <td>value</td> </tr> </table></td> <td> <table width="100" border="1"> <tr> <td>value</td> <td>value</td> </tr> </table> </td> <td> <table width="100" border="1"> <tr> <td>value</td> <td>value</td> </tr> </table></td> </tr> <tr> <td>value</td> <td>value</td> <td>value</td> <td>value</td> </tr> <tr> <td>value</td> <td>value</td> <td>value</td> <td>value</td> </tr> <tr> <td>value</td> <td>value</td> <td>value</td> <td>value</td> </tr> </table> 将 colspan 属性与普通表结构一起使用： table, th, td { border: 1px solid black; border-collapse: collapse; } <table> <tr> <th>Title 1</th> <th colspan="2">Title 2</th> <th>Title 3</th> </tr> <tr> <td>Subtitle 1.1</td> <td>Subtitle 2.1</td> <td>Subtitle 2.2</td> <td>Subtitle 3.1</td> </tr> <tr> <td>1.1 value</td> <td>2.1 value</td> <td>2.2 value</td> <td>3.1 value</td> </tr> </table> 价值

如何渲染没有标题行的 Angular 9 mat-table？

我正在使用 Angular 9。如何构造一个没有表头行 (th) 的 mat-table？听起来很傻，但如果我这样做 我正在使用 Angular 9。如何构建一个没有表头行 (th) 的 mat-table？听起来很傻，但如果我这样做 <table mat-table *ngIf="isMobile" #mobile_table [dataSource]="dataSource"> <ng-container matColumnDef="item"> <td mat-cell *matCellDef="let item_stat"> <div class="smallHeading"> {{ item_stat.max_date }} m </div> <div class="mainRow divider"> <a href="{{ item_stat.mobile_path }}">{{ item_stat.title }}</a> · {{ getScore(item_stat) }} </div> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="mobileDisplayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: mobileDisplayedColumns;" [ngClass]="getRowClass(row)"></tr> </table> 它产生错误 ERROR TypeError: Cannot read property 'template' of undefined at MatHeaderRowDef.extractCellTemplate (table.js:567) at table.js:2522 at Function.from (<anonymous>) at MatTable._getCellTemplates (table.js:2512) at MatTable._renderRow (table.js:2467) at table.js:2326 at Array.forEach (<anonymous>) at MatTable._forceRenderHeaderRows (table.js:2321) at MatTable.ngAfterContentChecked (table.js:1800) at callHook (core.js:4730) 我必须补充一下 <th mat-header-cell *matHeaderCellDef></th> 让表格正确渲染。这似乎没有必要，因为我不想为我的表格添加标题行。如何构建我的垫子表以便不需要这样做？ 您只需删除标题行 mat-header-row <tr mat-header-row *matHeaderRowDef="mobileDisplayedColumns"></tr> 对我来说效果很好。 只需删除这一行： <tr mat-header-row *matHeaderRowDef="mobileDisplayedColumns"></tr> 两种方式 删除<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> 或者 在你的CSS组件上添加:host ::ng-deep thead{display: none;} .mat-header-row { display: none; }

数据表警告 - 列计数不正确

我正在 asp.net mvc 中编码，我正在尝试实现 DataTables.net 的表，但出现此错误： DataTables 警告：表 id=abc - 列计数不正确。有关此的更多信息...

Javascript 无警报

我的网页上有以下 JavaScript，用于单击提交时。代码的其他部分调用 AJAX 请求并执行一些额外的检查，所有这些都有效。 在我的页面上，...

如何使导航栏跟随页面上的其余内容

我正在开发一个网站，索引页面上有一个非常大的表格，超出了屏幕宽度。我面临的问题是导航栏，并且表格的一部分没有遵循表格所在的位置...

如何创建 CSS 网格表格，其标题出现在表格跨越的每个打印页面上？

工作正常 HTML 中 的行 出现在表格延伸的每个打印页面上。 u00adu00ad u00ad 但是对于网格表呢？ 如何自动化... 工作正常<table> <tr> 内的 HTML <table> 的行 <thead> 出现在表格延伸的每个打印页面上。 但是对于网格表？ 如何在表格延伸的每个打印页面上自动打印使用display: grid实现的响应式CSS网格表格的标题？ 注意： 表格标题不得出现在所有页面上。它必须打印在表格延伸的页面上！ 文档中有几个表格。所有这些都是使用 CSS Grid 实现的。全部都可以跨多个页面。 注意：此应用程序不允许使用java脚本。 这不起作用 position: fixed; position: sticky; display: table-header-group; 打印时尝试设置position: fixed。 这是一个简单的示例（不能作为 SO 片段工作 - 在浏览器中运行并尝试打印）。 <style> .grid { display: grid; width: 100vw; } @media print { .grid .header { position: fixed; top:0; left: 0; } } </style> <div class="grid"> <div class="header">header</div> <div>top <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>bottom</div> </div>

将带有逗号的分割文本推送到表 td 中的下一行

我需要防止带逗号的文本拆分到下一行。这是一个例子： 但相反，我希望文本在拆分时移至下一行。这是我想要的结果： 这是我的代码：

如何完全删除 HTML 表格的边框

我的目标是制作一个类似于“相框”的HTML页面。换句话说，我想制作一个被4张图片包围的空白页面。 这是我的代码： ... 我的目标是制作一个类似于“相框”的HTML页面。换句话说，我想制作一个被4张图片包围的空白页面。 这是我的代码： <table> <tr> <td class="bTop" colspan="3"> </td> </tr> <tr> <td class="bLeft"> </td> <td class="middle"> </td> <td class="bRight"> </td> </tr> <tr> <td class="bBottom" colspan="3"> </td> </tr> </table> CSS 类如下： .bTop { width: 960px; height: 111px; background-image: url('../Images/BackTop.jpg'); } .bLeft { width: 212px; height: 280px; background-image: url('../Images/BackLeft.jpg'); } .middle { width: 536px; height: 280px; } .bRight { width: 212px; height: 280px; background-image: url('../Images/BackRight.jpg'); } .bBottom { width: 960px; height: 111px; background-image: url('../Images/BackBottom.jpg'); } 我的问题是表格单元格之间出现细白线，我的意思是图片的边框不连续。我怎样才能避免这些空白？ <table cellspacing="0" cellpadding="0"> 在CSS中： table {border: none;} 编辑： 正如 iGEL 指出的，该解决方案已被正式弃用（尽管仍然有效），因此如果您从头开始，则应该使用 jnpcl 的边框折叠解决方案。 到目前为止，我实际上非常不喜欢这种更改（不经常使用表格）。它使某些任务变得更加复杂。例如。当您想在同一位置（视觉上）包含两个不同的边框时，其中一个是一行的顶部，第二个是另一行的底部。它们将折叠（= 仅显示其中之一）。然后你必须研究边框的“优先级”是如何计算的以及哪些边框样式“更强”（双边框与实心边框等）。 我确实喜欢这样： <table cellspacing="0" cellpadding="0"> <tr> <td class="first">first row</td> </tr> <tr> <td class="second">second row</td> </tr> </table> ---------- .first {border-bottom:1px solid #EEE;} .second {border-top:1px solid #CCC;} 现在，随着边框折叠，这将不起作用，因为总是有一个边框被删除。我必须以其他方式做到这一点（有更多的解决方案）。一种可能性是使用带有 box-shadow 的 CSS3： <table class="tab"> <tr> <td class="first">first row</td> </tr> <tr> <td class="second">second row</td> </tr> </table>​​​ <style> .tab {border-collapse:collapse;} .tab .first {border-bottom:1px solid #EEE;} .tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​ </style> 您还可以使用类似“groove|ridge|inset|outset”的边框样式，只有一个边框。但对我来说，这不是最佳选择，因为我无法控制两种颜色。 也许有一些简单而不错的折叠边框解决方案，但我还没有看到它，而且老实说我没有花太多时间在上面。也许这里有人可以向我/我们展示;) table { border-collapse: collapse; } 对我来说，我需要做这样的事情来完全删除表格和所有单元格的边框。这根本不需要修改 HTML，这对我的情况很有帮助。 table, tr, td { border: none; } 在引导环境中，最重要的答案都没有帮助，但应用以下内容删除了所有边框： .noBorder { border:none !important; } 应用为： <td class="noBorder"> 在引导环境中，这是我的解决方案： <table style="border-collapse: collapse; border: none;"> <tr style="border: none;"> <td style="border: none;"> </td> </tr> </table> 这就是为我解决问题的方法： 在您的 HTML tr 标记中，添加以下内容： style="border-collapse: collapse; border: none;" 这删除了表格行上显示的所有边框。 使用 TinyMCE 编辑器，我能够删除所有边框的唯一方法是在如下样式中使用 border:hidden： <style> table, tr {border:hidden;} td, th {border:hidden;} </style> 在 HTML 中是这样的： <table style="border:hidden;"</table> 干杯 这里的所有答案在 2022 年都不起作用（至少对于 Chrome 来说），除了 <table cellspacing="0" cellpadding="0">。然而我需要一种 CSS 解决方案，而不是 HTML 解决方案。所以这里是： table, thead, tbody, tfoot, tr, th, td { padding: 0; border-spacing: 0; } padding 是 HTML cellpadding 的 CSS 同义词，border-spacing 分别代表 cellspacing。但这并不是一件很明显的事情。 在全局 CSS 中使用此 CSS 样式 .table, .monthview-datetable td, .monthview-datetable th { border: none !important; } 鉴于： <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <table> 在你的 CSS 上使用它会起作用： tr { border: transparent 1px solid; } 我发现border-spacing是我的问题 td, th, tr, table { border: 0 !important; border-spacing:0 !important; } table { border: none; } 您可以使用此 css 属性来隐藏表格边框。 这解决了我的 th,td 周围微小边框的问题（=背景表的颜色）。设置盒子阴影的颜色：1px 1px 1px #003366;与背景颜色相同。在 Edge、Chrome 和 Firefox 中尝试过！ table { padding: 0; border-collapse: collapse; border: none; } th { background-color: #003366; color: white; text-align: center; box-shadow: 1px 1px 1px #003366; }

Table Jquery 单击时水平滚动

我有一个带有溢出滚动的表格，我希望用户也能够单击按钮来滚动表格。请参阅下面的小提琴以获取我的代码。 任何关于我出错的地方的帮助都会...

如何使用Cheerio在Javascript中将多个子表数据拉取为单个表数据

我想从此网页下载整个表格数据。它有五个子表，每个子表都有自己的 thead 和 tbody，位于“table[class="calendar"]”下。我下面的代码可以拉出所有的标题...

对html表格的列数求和

我想将以下表格的列添加在一起，并在最后一行显示相同的表格。我能够收集第一个表的列并将它们显示在最后一行，但是我......

列表中的角度材料表

我想将以下数据显示为表格。但它并没有按预期工作。我该怎么做？ 显示列 = ['A', 'B', 'C'] 值 = [ ['a1'，'b1'，'c1']， ['a2'，'b2'，'c2']， ['a3'，'b3'，'c']， ...

尝试获取单击时的行数据

我试图在单击一行时从此表中获取行数据，特别是 ID。我已经能够做到这一点，因为我将 ID 添加到行中并利用事件以这种方式获取行数据...

PDF 中跨多个页面的表格始终具有表格标题

我有一个页面，里面有一个 HTML 表格，也可以下载为 PDF。现在，此表的内容可能会有所不同 - 它可以包含许多项目，跨越可下载的 PDF 中的多个页面......

HTML 表格水平填充，但有单列换行

我有一个 Chrome 网络扩展弹出窗口，其中 popup.html 包含如下表 我有一个适用于 Chrome 的 web 扩展弹出窗口，其中 popup.html 包含如下表格 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="popup.css"> </head> <body> <table><tbody> <tr> <td>Title A</td> <td>Medium Value A</td> <td>Ending A</td> </tr> <tr> <td>Title B</td> <td>Value B</td> <td>Ending B</td> </tr> <tr> <td>Title C</td> <td>Super Very Extra Elongated Almost A Sentence Value C</td> <td>Ending C</td> </tr> <tr> <td>Title D</td> <td>This is a very long value that will take up a lot of space in the second column of the table. It contains three sentences to make it even longer. This is the third sentence.</td> <td>Ending D</td> </tr> </tbody></table> </body> </html> 我需要提供 CSS 以便 表格（和弹出窗口）在弹出窗口内占据了内容文本所需的水平空间，直到弹出窗口的最大宽度（800px） 如果表格内容占用的空间超过弹出窗口中水平允许的空间（800px），那么第二列的内容应该换行 其他列的内容均不应换行 我得到了部分解决方案，但没有完整的解决方案： 如果表格具有 CSS 规则 table { white-space: nowrap } 那么它会展开，但由于最后一行较大而有一个滚动条 向第二列添加规则table td:nth-child(2) { white-space: normal }会导致第二列水平缩小到内容中最长单词的宽度 - 表格不会填充整个弹出窗口 通过CSS规则设置弹出窗口的宽度html, body { margin: 0; width: 800px }允许第二列适当换行。但如果删除最后一行，弹出窗口太宽，表格右侧有空间 有没有办法用 CSS 做到这一点？ 如果我理解正确，您可以为表格指定 100% 的宽度，然后为每个 td 指定一个百分比宽度（如果需要，也可以指定 px 宽度）。 这里我的第一列和第三列高度相同，第二列更宽。 为了测试，我在偶数行中添加了一条条纹。 table { width: 100%; } table tr td:nth-child(1), table tr td:nth-child(3) { width: 20%; } table tr td:nth-child(2) { width: 60%; } table tr:nth-child(even){ background:red } <table> <tbody> <tr> <td>Title A</td> <td>Medium Value A</td> <td>Ending A</td> </tr> <tr> <td>Title B</td> <td>Value B</td> <td>Ending B</td> </tr> <tr> <td>Title C</td> <td>Super Very Extra Elongated Almost A Sentence Value C</td> <td>Ending C</td> </tr> <tr> <td>Title D</td> <td>This is a very long value that will take up a lot of space in the second column of the table. It contains three sentences to make it even longer. This is the third sentence.</td> <td>Ending D</td> </tr> </tbody> </table>

如何将两个SQL查询合并为一个并在foreach循环PHP中显示

我试图在表格中显示两个特定的人（一对夫妇的收入）（通过foreach循环PHP）。 每个人应显示在一列中，每行显示收入。 连接我的情侣/人

水平滚动的 HTML 表格（前 5 列固定）

我一直在尝试想办法创建一个固定前 5 列的表（同时允许表的其余部分水平溢出）。我尝试在 Google 上搜索解决方案...

CSS 网格单元格中表格的滚动问题

我对 html/css 比较陌生，因为我职业生涯的大部分时间都花在 WPF 桌面应用程序上。我已经开始提供一些应用程序的网络版本，并且一直在享受学习的乐趣...

在并排 html 表格中实现自动换行

我有两张桌子，设计为并排呈现，除非设备（尚未定义为“太小”）。对于右侧出现的表格，我们希望消息 c...

如何隐藏元素内的文本内容但不隐藏子元素？

我有以下 HTML 结构，我想隐藏 td 内的点。限制是，我无法更改 HTML。 • 链接1 我已经...