由于它与HTML有关，因此表格用于以表格方式显示数据。关于HTML表的问题应该通过显示有问题的源代码来询问，或者，如果问题是关于根据需求创建表失败的尝试，提问者需要显示失败的尝试，描述期望和行为如何不同。
由于表单元的大小及其包含DIV的大小都相对于窗口的宽度而设置，因此这些单元格完全适合DIV。这可以完美地适合宽度，但不能为高度提供。最后一行的细胞似乎以分数量伸出了DIV的底部。 to以DIV的尺寸和一个表单元格的尺寸表明它们应该正确对齐，因为细胞的高度正好是DIV高度的1/10，并且有10行的细胞。但是，即使数学可以按预期的方式发挥作用，视觉效果也不匹配。
为什么DIV的高度不等于表单元格高度的总和，即使登录到控制台时相等？ 我正在尝试动态构造一个表，其大小由浏览器窗口的当前宽度确定。 由于表单元的大小及其包含DIV的大小都被设置为相关...
是什么导致计算高度和显示高度之间的差异？
当一个值输入到输入中时，只能显示包含该值的行（或行），并且起作用。为此，每个<td>都有一个标签，但只有第一个tag tag。这是一个例子。红色边界内的文字是唯一起作用的值。忽略<p class="x"> <td> class="red" $("#filter").on("input", function () { let value = $(this).val().toLowerCase(); $("tbody tr").filter(function () { $(this).toggle($(this).find(".x").text().toLowerCase().indexOf(value) === 0); }); }) 我想做的是，例如，如果我将“机器人”一词，“游戏”或“ box”放在.red {border: 1px solid red;}（而不仅仅是“机器人”）中，那么所有包含这些单词的所有单词都会显示整个行。 您的代码正确地标识了该行中的元素，并使用call拨打<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <input id="filter" type="text" autocomplete="off"> <table> <tbody> <tr> <td>---</td> <td> <p class="x red">text</p> </td> <td> <span></span> <p class="x">card</p> </td> </tr> <tr> <td> <p class="x red">robot</p> </td> <td> <p class="x">game</p> </td> <td> <p></p> <p class="x">box</p> </td> </tr> </tbody> </table>，但是下一个链接方法input仅获取第一个匹配的文本。 INSTEAD您需要迭代所找到的所有元素，然后单独验证其文本： tr
我在其中使用p-Checkbox时会出现一些性能问题。表有大约1000行和15列的东西，其中10个仅包含复选框。 所以在端桌上...
<td #elCol ...> <ng-container *ngIf="overflows(elCol)"> YES <!-- this is displayed when it overflows, the function works --> </ng-container> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <button *ngIf="overflows(elCol)"> click me <!-- Can't get this to displayed because it is behind the text --> </button> </td> td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 20rem; } HTML/SCSS和TS/JS解决方案都可以使用 您可以尝试在底部显示按钮，首先我们设置了要可见的overflow-y。 td { overflow-x: hidden; overflow-y: visible; text-overflow: ellipsis; white-space: nowrap; max-width: 20rem; } 我们将按钮转换为绝对位于底部。 <td #elCol ... style="position: relative"> <!-- changed here --> <ng-container *ngIf="overflows(elCol)"> YES <!-- this is displayed when it overflows, the function works --> </ng-container> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <button *ngIf="overflows(elCol)" class="floating-button"> <!-- changed here --> click me <!-- Can't get this to displayed because it is behind the text --> </button> </td> 按钮的CSS看起来像： .floating-button { position: absolute; top:100%; right: 0px; z-index: 300; // add if necessary. } 我在底部显示的原因是因为，如果没有〜省略者不会显示，另一种方法是使用JS代码以编程方式添加省略号，但是与此相比，此方法的复杂性较小。
我如何用CSS对齐整个桌子？ 边缘右翼无济于事 这里：http：//jsfiddle.net/dimskraft/y2fky/ html： ... 我如何用CSS对齐整个桌子？ margin-right没有帮助 here：http：//jsfiddle.net/dimskraft/y2fky/ Html： <table class="block logo"> <colgroup> <col style="width:50%"/> <col style="width:50%"/> </colgroup> <tr> <td>something</td> <td> <table class="menu"> <tr> <td>Item 1</td> <td>Item 2</td> </tr> </table> </td> </tr> </table> CSS： table { width: 100%; } table.menu { width: auto; margin-right: 0px; } 您也需要将左边的边距设置为auto。这将使左边的边缘将桌子推到右边缘所允许的右边。 table { width: 100%; } table, td { border: solid black 1px; } table.menu { width: auto; margin-right: 0px; margin-left: auto; } <table class="block logo"> <colgroup> <col style="width:50%"/> <col style="width:50%"/> </colgroup> <tr> <td>something</td> <td> <table class="menu"> <tr> <td>Item 1</td> <td>Item 2</td> </tr> </table> </td> </tr> </table> easy- table { width: 60%; /* Whichever width you want */ margin-left: 40%; /* Minus the amount to make it 100% */ } 使用float: right：table.menu { width: auto; float: right; } jsfiddle solution2： ASfloat不是一个好习惯，可以在表中使用<td style="text-align: right">和display: inline-table：：<td style="text-align: right"> <table border="1" class="menu"> <tr> <td>Item 1</td> <td>Item 2</td> </tr> </table> </td> table.menu { width: auto; display: inline-table; } JSFIDDLE解决方案2 您可以通过执行桌子向右漂浮 table { float: right; width: auto; } demo但请注意，您需要清除浮点的内容，以获取IT之后的内容 在不使用浮子而不清除浮子的命令中，您可以应用边距。这也将与旧的CSS版本一起使用。 table { width: auto; margin-left: auto; /* This pushes the table to the right */ margin-right: 0; }
角，如何使用 *ngfor设置行ID或html-table的任何重复
...我想动态地为每个行设置一个ID 或Angular中的任何重复。 <div *ngFor="let d of data | async"> <table border=1> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Age</th> </tr> <tr id="row"> <td>{{ d.id }}</td> <td>{{ d.name }}</td> <td>{{ d.email }}</td> <td>{{ d.age }}</td> </tr> </table> 因此，有人可以帮助我如何使行具有ID，例如row1，row2，row3等？ 谢谢你 您可以使用index并分配给rowID并使用 <div *ngFor="let d of data; let rowId= index | async"> 然后 <tr [attr.id]=rowId> <td>{{ d.id }}</td> <td>{{ d.name }}</td> <td>{{ d.email }}</td> <td>{{ d.age }}</td> </tr> 您可以尝试波纹管代码 <div *ngFor="let d of (data | async) ; let i = index"> <table border=1> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Age</th> </tr> <tr id="row{{1+i}}"> <td>{{ d.id }}</td> <td>{{ d.name }}</td> <td>{{ d.email }}</td> <td>{{ d.age }}</td> </tr> </table> </div> thanks， 我认为，在您的情况下，无需使用额外的变量： 这将从前端节省钻头处理，因为它不必必须 保持任何索引可变。 Just使用： index <tr [attr.id]="d.id"> 使用以下代码： <tr id="row"> 使用Angular 19和我发现的材料： <div *ngFor="let d of data ; let i=index | async"> <table border=1> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Age</th> </tr> <tr id="row{{i+1}}"> <td>{{ d.id }}</td> <td>{{ d.name }}</td> <td>{{ d.email }}</td> <td>{{ d.age }}</td> </tr> </table> </div> “ RecordID”可以是数据库/enetity或类似物品的任何值/参数。 我希望这对某些人有帮助。
可以使用jQuery填充缺少标签的表格？ 我有下表，有两个<td>---
项目1 项目2项目3... 我有下表，有两个<table> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 1</td> <td>---</td> <td>---</td> </tr> </table> 我正在寻找的是检测tr是否具有3个标签，如果它只有2或1个标签，则自动添加丢失的td标签。 在此示例中，我只为每个td使用了3td，但是我希望能够使用更多。我不知道是否可能，或者我是否正确解释了自己，但我希望有人可以指导我。 看起来很简单，并且您当然不需要jQuery... 元素在tr元素上 申请td元素计数3减去当前数量<tr>元素的数量 <td> <td> <td>---</td>
<table align="center" border="0" border-collapse:="" cellpadding="5" cellspacing="5" collapse="" style="height: auto; width: 1229px; max-width: 100%;"> 我想知道如何使我的表格重新调整，因此当我调整浏览器窗口或在移动设备上时，表相应地调整了自身。 您想使用的是媒体查询，可让您根据屏幕/设备的大小在屏幕上选择内容的方式和位置。 查看这些查看以获取进一步参考： https：//www.w3schools.com/css/css3_mediaqueries.asp https：//www.w3schools.com/css/css_rwd_mediaqueries.asp 您可以考虑使用CSS网格作为创建响应表的一种方法，如果您的用例可能会使用它 https：//developer.mozilla.org/en-us/docs/web/css/grid 如果您拥有最好在表中显示的数据，那么您将知道您拥有多少列，并且会对它们相对宽阔的范围有所了解。您还将决定要在一个非常狭窄的设备上发生的事情 - 是否可以立即将所有细胞挤压到整个行，或者如果情况不合适，则可以水平滚动的用户在可用的屏幕上吗？为了掩盖这一点，您可能想为桌子本身或其容器设置一个最小宽度。 一旦解决，您可以使用CSS对每个单元格进行样式，相对于表格的整体宽度。在最简单的情况下，您希望它们所有相同的宽度都可以给它们每个容器宽度的x％的x％x*列数=100. poshionwise您可以使用CSS选择器，例如TD：nth-Child（1）{width：10％;} td：nth-Child（2）{width：15％;}等等。 相似于单元高 - 您可能需要根据行号而变化。 这样，它继续了，但是使用CSS，而不是折衷的特定表格属性，您具有很大的灵活性，例如，行和列在哪些行和基本尺寸上获得什么填充或颜色或边界。 如果您保留所有尺寸，则可能不需要使用媒体查询。 在我的例子中，我给了你一个自适应的例子。自适应射击以800px宽度。希望对您有帮助。 table table { border-collapse: collapse; border-spacing: 0; width: 100%; overflow: hidden; } thead { background-color: #E5E5E5; } tr:nth-child(even) { background-color: #F2F2F2; } th, td { padding: 15px; text-align: center; } @media(max-width: 800px) { table { border: 0; } thead { display: none; } tr { display: block; margin: 0 0 20px 0; } td { display: block; text-align: right; } td:before { content: attr(aria-label); float: left; font-weight: bold; } td:last-child { border-bottom: 0; } tr:nth-child(odd) { background-color: #F2F2F2; } tr:nth-child(even) { background-color: #FFFFFF; border-width: 3px 0 3px 0; border-style: solid; border-color: #E5E5E5; } }
如何动态转换XML转换为表？ 我想显示XML代码作为表，以提高可读性。 我不想使用XML解析器，只是快速复制，粘贴转换器。 但是我现在正在编码它的方式仍然非常耗时。 是
在此示例中，XML已经在文本区域中。它包含2名员工。 （这将是更多，这就是为什么我说耗时的原因） 使用一个按钮，您首先将其转换为DIV的InnerHTML，称为“输出”。我认为将数据输入文档并将其转换为表是尸体。但是，如您所见，这意味着我必须为所有员工调整JS代码 +表。有时，XML将包含随机数雇员。因此，动态的方式会更好。 预先感谢您
如何用JS动态转换XML代码？ 我想显示XML代码作为表，以提高可读性。 我不想使用XML解析器，只是快速复制，粘贴转换器。 但是我现在正在编码它的方式仍然非常耗时。 是
在此示例中，XML已经在文本区域中。它包含2名员工。 （这将是更多，这就是为什么我说耗时的原因） 使用一个按钮，您首先将其转换为DIV的InnerHTML，称为“输出”。我认为将数据输入文档并将其转换为表是尸体。但是，如您所见，这意味着我必须为所有员工调整JS代码 +表。有时，XML将包含随机数雇员。因此，动态的方式会更好。 预先感谢您
如何通过通过HTML表的任意列添加索引 CSS？换句话说，在这里获得0、1、2，而无需实际输入 他们在： <!DOCTYPE html> <html> <head><title>test</title></head> <body> <table border="1"> <tr><td></td><td>0</td><td></td></tr> <tr><td></td><td>1</td><td></td></tr> <tr><td></td><td>2</td><td></td></tr> </table> P.S。，请告诉我如何添加索引以说该中间列。请 不要用额外的CSS绒毛。 “我把车换了消音器。 当我回来时，我什至无法在停车场找到它，因为 他们给了它一份新的油漆工作。” 这里是您的答案： <!DOCTYPE html> <html> <head> <title>test</title> <style type="text/css"> table { counter-reset: row-counter; } tbody tr { counter-increment: row-counter; } tr td:nth-child(2)::before { content: counter(row-counter);} </style> </head> <body> <table border="1"> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table> 我都知道它有效。不要问我为什么。
？ 前： 商品价格 香蕉$ 2 橙色$ 1 后： 否项目价格 1香蕉$ 2 2橙色$ 1 如何自动添加它？即，什么 如何使用CSS添加索引列？ Fore： ITEM PRICE Banana $2 Orange $1 后： No. ITEM PRICE 1 Banana $2 2 Orange $1 如何自动添加它？也就 或JavaScript是唯一的方法？如果JavaScript在读者的浏览器中未打开？ <td>1</td> table { counter-reset: row-counter; border-collapse: collapse; width: 50%; margin: 20px auto; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f4f4f4; } tbody tr { counter-increment: row-counter; } tr td:first-child::before { content: counter(row-counter); margin-right: 10px; font-weight: bold; } 是的，这是可能的 有关更多详细信息，您可以参考Https：//www.w3schools.com/css/css_counters.asp
I在GridView上工作，我无法为包括多个活动的类别创建一个排范围，每个类别的单元格应包含几个活动单元格。 因此，我将按类别分组为