html-table 相关问题

如何在HTML表格中跨单元格绘制箭头？

我有一个简单的 html 表格，其中包含一些我使用 td 标签创建的单元格。 例如，现在我需要绘制一个从单元格 A2 到 C2 的箭头。 我考虑过创建一个 jQuery 函数来获取 XY

在 colspan 内的 td 元素中使用更细的边框

我有以下 HTML 表格。正如您所看到的，我有两列具有 colspan 属性。我希望里面的 td 具有更薄的边框，以便用户可以更清楚地看到“真实”c...

为什么当我尝试检索值时会检索整个表？

我不明白这段代码： 我不明白这段代码： <div class="tab-content tab-opened" id="technic-description"><div class="product-collateral"><div class="product-specs-box"><div class="title"><strong>Spécifications des produits</strong></div><div class="table-wrapper"><table class="data-table"><thead><tr class="hidden-row"><th width="25%"><span>Nom d'attribut</span></th><th><span>Valeur d'attribut</span></th></tr></thead><tbody><tr class="odd"><td class="spec-name">L (Largeur produit) en mm</td><td class="spec-value">600</td></tr><tr class="even"><td class="spec-name">Nombre de portes</td><td class="spec-value">1</td></tr><tr class="odd"><td class="spec-name">Installation</td><td class="spec-value">Sur pieds</td></tr><tr class="even"><td class="spec-name">Finition</td><td class="spec-value">Laquée blanche</td></tr><tr class="odd"><td class="spec-name">Garantie Pièces en mois</td><td class="spec-value">24</td></tr><tr class="even"><td class="spec-name">P (Profondeur produit) en mm</td><td class="spec-value">585</td></tr><tr class="odd"><td class="spec-name">Type d'énergie</td><td class="spec-value">Electrique</td></tr><tr class="even"><td class="spec-name">Alimentation/Tension</td><td class="spec-value">230 V Mono</td></tr><tr class="odd"><td class="spec-name">H (Hauteur produit) en mm</td><td class="spec-value">855</td></tr><tr class="even"><td class="spec-name">Type de porte</td><td class="spec-value">Porte Pleine</td></tr><tr class="odd"><td class="spec-name">Dosseret</td><td class="spec-value">Non</td></tr><tr class="even"><td class="spec-name">Poids net en kg</td><td class="spec-value">44</td></tr><tr class="odd"><td class="spec-name">Puissance (kW)</td><td class="spec-value">0.15</td></tr><tr class="even"><td class="spec-name">Nombre de niveaux</td><td class="spec-value">3</td></tr><tr class="odd"><td class="spec-name">Volume (L)</td><td class="spec-value">120</td></tr><tr class="even"><td class="spec-name">Dimensions grille L x P (mm)</td><td class="spec-value">502 x 415 mm</td></tr><tr class="odd"><td class="spec-name">Nombre de tiroirs</td><td class="spec-value">0</td></tr><tr class="even"><td class="spec-name">Affichage Commandes</td><td class="spec-value">Digital</td></tr><tr class="odd"><td class="spec-name">Fourchette de températures</td><td class="spec-value">-10°C/-25°C</td></tr><tr class="even"><td class="spec-name">Type de gaz</td><td class="spec-value">R290</td></tr><tr class="odd"><td class="spec-name">Type de température</td><td class="spec-value">Négative</td></tr><tr class="even"><td class="spec-name">Type de réfrigération/refroidissement</td><td class="spec-value">Froid statique</td></tr></tbody></table></div></div></div><div class="document-link"><span class="label"><strong>Fiche technique:</strong></span> <a style="font-size:14px;margin-right:5px" class="button-1" href="https://cdnapi.interactiv-database.fr/api/public/2a1985c1-c200-46c5-bdbe-cd325f494330/file/display/ft_a20bnp.pdf" target="_blank"><i class="digi-out-pdf-file"></i>&nbsp; A20BNP-AFI.pdf</a> <iframe src="https://cdnapi.interactiv-database.fr/api/public/2a1985c1-c200-46c5-bdbe-cd325f494330/file/display/ft_a20bnp.pdf" width="500" height="500"></iframe></div></div> 我尝试通过Python抓取来检索该值： caract = soup.find("td", class_= 'spec-name') print(caract) 但是，它检索整个表，而我只想获取规格名称，然后获取规格值。这是我尝试过的： rows = soup.find_all('tr', class_=['odd', 'even']) # Extract specifications specs = {} for row in rows: spec_name = row.find('td', class_='spec-name').text.strip() spec_value = row.find('td', class_='spec-value').text.strip() specs[spec_name] = spec_value # Display the specifications for key, value in specs.items(): print(f"{key}: {value}") 但它一直无休止地循环。 这是获取该表的三行代码： import pandas as pd df = pd.read_html('https://www.collin-lucy.fr/armoire-r%C3%A9frig%C3%A9r%C3%A9e-n%C3%A9gative-1-porte-pleine-120-l-laqu%C3%A9e-blanche-a20bnp')[0] print(df) 终端结果： Nom d'attribut Valeur d'attribut 0 L (Largeur produit) en mm 600 1 Nombre de portes 1 2 Installation Sur pieds 3 Finition Laquée blanche 4 Garantie Pièces en mois 24 5 P (Profondeur produit) en mm 585 6 Type d'énergie Electrique 7 Alimentation/Tension 230 V Mono 8 H (Hauteur produit) en mm 855 9 Type de porte Porte Pleine 10 Dosseret Non 11 Poids net en kg 44 12 Puissance (kW) 0.15 13 Nombre de niveaux 3 14 Volume (L) 120 15 Dimensions grille L x P (mm) 502 x 415 mm 16 Nombre de tiroirs 0 17 Affichage Commandes Digital 18 Fourchette de températures -10°C/-25°C 19 Type de gaz R290 20 Type de température Négative 21 Type de réfrigération/refroidissement Froid statique 现在您可以根据需要对该数据框进行切片和切块。请参阅 pandas 文档此处。

如何在React.js Tailwindcss中使元素表响应式

我想使用 Tailwind CSS 在桌面和移动设备上制作响应式表格。然而，这个表组件是 React.js router dom 中 的子组件。 桌面视图 移动视图 // L...

从字符串中的 HTML 表格标记中删除行

客户有约 7,000 种产品，其描述中带有“您的价格：$...”，价格已输入（没有现有的通配符）。 下面是一个描述示例： 客户有大约 7,000 种产品，其描述中带有“您的价格：$...”，价格已输入（没有现有的通配符）。 以下是描述示例： <table cellpadding="5" border="0" width="100%"><tbody><tr><td><strong>Part #: </strong></td><td>FIV000-2100</td></tr><tr><td><strong>Retail Price: </strong></td><td>$26.39</td></tr><tr><td class="price"><strong>Your Price: </strong></td><td class="price">$23.75</td></tr><tr><td align="center" colspan="2"/></tr></tbody></table> 是否有正则表达式可用于删除“您的价格”行？如果我们还想删除零售价格行怎么办？ 你可以这样做（假设 $str 是 html 字符串）： $pattern = "/<tr><td class=\"price\"><strong>Your Price: <\/strong><\/td><td class=\"price\">\\$[0-9.]+<\/td><\/tr>/"; $str = preg_replace($pattern, "", $str); 空字符串将替换为空字符串，从而将其删除。 编辑： 转义了一些东西以使其正常工作。我还强烈建议您使用 HTML 解析器。我们称之为快速而肮脏的方法。 我强烈建议您为此使用 HTML 解析器。话虽这么说，以下内容很可能会满足您的要求： /Your Price:.*?\$(\d+(?:,\d+)?(?:\.\d+)?)/ 我不知道 MySQL 正则表达式语法，所以你可能需要仔细检查。 你真的不想用正则表达式解析或修改 HTML...只需使用为此制作的东西，例如 phpQuery：http://code.google.com/p/phpquery/

是否可以更改 HTML 表格中的选项卡/焦点顺序，使其先垂直传输，然后水平传输？

是否可以更改 HTML 表格中的选项卡/焦点顺序，使其先垂直传输，然后水平传输？

需要 jQuery 解决方案来解决在表格单元格内编辑 onClick 时的输入大小问题

我不是在这里寻找插件解决方案！我想要用最少的编码以最简单的方式解决这个问题。 $('td.editable').live('点击', function(){ var newhtml = '<

哪些方法/如何复制此“价格比较”响应式卡片布局？

计划对比桌面： 计划比较手机： 你好， 我正在寻找一些关于设计这部分布局的方法的想法。 此部分有桌面版和移动版（上图）...

在 HTML 中打印表格的多行时如何使用分页符？

我有一个 HTML 表格，用户可以在其中添加任意数量的行。但是，当表格很长并且我打印表格时，表格被切断，其他行不可见。我想要什么...

将表格中的第一行文本与周围文本的基线对齐

有没有办法将表格内的文本与周围的文本对齐？我在任何地方都找不到这样的问题。似乎它应该是可行的，而不必用......替换桌子

Htmlagilitypack - 从同一行读取两个不同的节点并将它们添加到列表视图

我正在尝试使用（span class = text）从列表中获取所有参与者名称值以及使用（class = contenu）的短名称值，并将它们添加到列表视图项目的不同列中...

CSS 粘性定位在 <thead> 中不起作用的可能原因

我创建了一个模仿 C# 的 datagridview 的自定义元素。我能够像 dot net 的 listview 或 datagridview header 一样将 粘在顶部，直到最近我注意到它确实如此......

Github markdown，表格单元格中代码块的语法高亮

Markdown 有管道表语法，但在某些情况下还不够。 |表|语法|没有多行单元格内容 | 因此，我们可以使用 HTML 表格标签。 ````c... Markdown 有管道表语法，但在某些情况下还不够。 | table | syntax | without multiline cell content | 因此，我们可以使用 HTML 表格标签。 <table> <tr> <td> ```csharp const int x = 3; const string y = "foo"; readonly Object obj = getObject(); ``` </td> <td> ```nemerle def x : int = 3; def y : string = "foo"; def obj : Object = getObject(); ``` </td> <td> Variables defined with <code>def</code> cannot be changed once defined. This is similar to <code>readonly</code> or <code>const</code> in C# or <code>final</code> in Java. Most variables in Nemerle aren't explicitly typed like this. </td> </tr> 但是前段时间语法突出显示被破坏了，这个wiki页面现在看起来很难看。关于如何解决这个问题有什么想法吗？ 您可以在表格中使用 <pre>，如 teh_senaus 所说。 但如果你这样做，语法突出显示将不起作用......或者会吗？ 通过随机实验我发现GitHub允许用<pre lang="csharp">指定它。 这与 ```csharp 将语法突出显示设置为 C# 具有相同的效果。 这在 GitHub 帮助中心和 linguist 的文档中都没有真正记录。 但它有效，即使在桌子内部也是如此。 因此，对于您的示例表，新代码如下： <table> <tr> <td> <pre lang="csharp"> const int x = 3; const string y = "foo"; readonly Object obj = getObject(); </pre> </td> <td> <pre lang="nemerle"> def x : int = 3; def y : string = "foo"; def obj : Object = getObject(); </pre> </td> <td> Variables defined with <code>def</code> cannot be changed once defined. This is similar to <code>readonly</code> or <code>const</code> in C# or <code>final</code> in Java. Most variables in Nemerle aren't explicitly typed like this. </td> </tr> 在 <td> 和代码块之间添加一个空行。 这是固定降价： <table> <tr> <td> ```csharp const int x = 3; const string y = "foo"; readonly Object obj = getObject(); ``` </td> <td> ```nemerle def x : int = 3; def y : string = "foo"; def obj : Object = getObject(); ``` </td> <td> Variables defined with <code>def</code> cannot be changed once defined. This is similar to <code>readonly</code> or <code>const</code> in C# or <code>final</code> in Java. Most variables in Nemerle aren't explicitly typed like this. </td> </tr> </table> 结果： 您可以使用<pre>。语法突出显示不起作用，但至少它的格式会正确。 <td><pre> const int x = 3; const string y = "foo"; readonly Object obj = getObject(); </pre></td> 另一种方法是使用多个 ` 和 <br>，但语法高亮不起作用。 |1|2|3 -|-|- `const int x = 3;`<br>` const string y = "foo";`<br>`readonly Object obj =getObject();`|`def x : int = 3;`<br>`def y : string = "foo";`<br>`def obj : Object = getObject(); `|Variables defined with `def` cannot be changed once defined. This is similar to `readonly` or `const` in C# or `final` in Java. Most variables in Nemerle aren't explicitly typed like this.explicitly typed like this. 技巧是在代码周围使用 反引号，同时用 <pre> 标签将其全部包裹起来，如下所示： <pre lang=html>`<input readonly>`</pre> 这是它如何呈现的屏幕截图，来自我自己的用例： 您还可以： A | B | C -- | -- | -- x | y | Some code : <pre lang=php>function sayHello($someArg)</pre> 1 | 2 | 3 实际上有一个针对 Markdown 表的 hack：使用 ASCII 字符 10（换行符）或 13（回车符）作为 <pre lang> 中的 XML 字符引用来添加换行符。 | | Response | | --- | --------- | | 200 | <pre lang="json">{&#10; "id": 10,&#13; "username": "chucknorris"&#10;}</pre> | | 400 | Some text here | 将给予： 此技术的学分请参阅此答案。

创建带有动态列和计数的 Angular 表

我需要使用我的 API 数据在 Angular 中创建如下所示的表。 每个产品都会有多个带有计数的站。 我需要的是我需要连续展示的每个产品也需要...

转到表格组件的下一页时删除了粘性列

我有一个自定义表格和分页器独立组件。当我有一个表格本身时，粘性对于该列来说效果很好，但是当我向表格添加分页器时，只要我...

2 列，第二列垂直偏移

CSS中可以做这样的布局吗？ 当然要保持秩序。

Angular 7 mat-table 每行可重复使用组件

mat-table 中的每一行如何成为可重用组件？ 在常规 html 表中我使用这种方法 ... mat-table 中的每一行如何成为可重用组件？ 在常规 html 表中我使用这种方法 <table class="table table-hover table-bordered"> <thead> <tr> <th class="text-left width-50" ></th> <th class="text-left width-85">Id</th> <th class="text-left">Price</th> <th class="text-left width-160">City</th> <th class="text-left width-160">State</th> <th class="text-left width-160">Qty</th> <th class="text-left width-160">Action</th> </tr> </thead> <tbody> <tr pdp-adjustment-list-item *ngFor="let currentItem of pagedResponse?.content" (idCheckedOutput)="addItemIdToCheckedArray($event)" [item]="currentItem" > </tr> </tbody> </table> pdp- adjustment-list-item 是AdjustmentListItemComponent 的选择器。 这很方便，因为每一行都是具有反应形式的 AdjustmentListItemComponent 的同一个实例，以及我在循环中传递对象的一个 @Input() 项目。 这是干净且直观的。 现在，在 Angular7 材质表示例中，我可以发现所有内容都放置在一个超级组件中。 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef> No. </th> <td mat-cell *matCellDef="let element"> {{element.position}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <ng-container matColumnDef="weight"> <th mat-header-cell *matHeaderCellDef> Weight </th> <td mat-cell *matCellDef="let element"> {{element.weight}} </td> </ng-container> <ng-container matColumnDef="symbol"> <th mat-header-cell *matHeaderCellDef> Symbol </th> <td mat-cell *matCellDef="let element"> {{element.symbol}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> 如果这是真的，并且您实际上必须将所有内容都保留在一个超级组件中，那么当我们谈论可重用性时，这不仅是糟糕的设计选择，而且必须将所有内容都保留在一个组件中会产生巨大的意大利面条代码混乱。 因此，解决这个问题的方法是为 uber 组件中的每一行动态创建一个反应式表单，然后利用表单数组，但有什么意义呢？实际上我这样做了并决定删除它，因为代码完全无法维护。 听起来像 pdp- adjustment-list-item 类似 <td *ngFor="let .... 但这里完全相同，您定义列，行是根据“数据源”动态生成的。 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> 您甚至可以动态生成列定义 <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns"> <mat-cell *matCellDef="let element"> {{ element[column] }} </mat-cell> </ng-container> 从材料文档中检查此示例 具有反应形式的材料示例

VS Code 中已弃用的 HTML 属性的自动建议？

我目前正在制作电子邮件模板。键入诸如 和一些更常用的属性有点烦人... 我目前正在制作电子邮件模板。手动输入 <table cellpadding="0" cellspacing="0"> 等属性以及 <td height="20" width="600"> 等更常用的属性有点烦人。有没有人找到如何打开它的方法？ 我尝试使用类似的设置 "[html]": { "editor.suggest.showDeprecated": true, "editor.showDeprecated": true }, 但他们对此没有帮助。另外我没有找到任何可以添加这种可能性的扩展。 只需编写您自己的自定义 Emmet 片段。

使用 JS 合并具有相同值的相邻 HTML 表格单元格

我已经为此苦苦挣扎了一段时间。我有一个根据一些 JSON 数据自动生成的表，该数据可能会有所不同。我想合并第一列中的相邻单元格，其中...

HTML 表格标题边框移动（与背景颜色重叠）

我根据我的真实项目创建了这个虚拟表。我遇到的问题是，当单元格的内容发生变化（无换行）时，表标题上的边框会移动，因此边框会覆盖...