由于它与HTML有关，因此表格用于以表格方式显示数据。关于HTML表的问题应该通过显示有问题的源代码来询问，或者，如果问题是关于根据需求创建表失败的尝试，提问者需要显示失败的尝试，描述期望和行为如何不同。
我有一个有 6 列的表格。在其中一个行单元格中，我使用文本区域元素来显示和捕获用户输入。 目前，文本区域内的内容被截断，并出现一个椭圆...
我有一个 Blazor 组件，可以在 div 内呈现表格（请参阅下面的代码）。 div 有一个 id 将其绑定到 CSS，该 id 指定具有 max-height 和 max-width 属性的overflow:auto。 桌子...
考虑下面的 2×2 html 表： 考虑下面的 2×2 html 表： <table style="width: 100%; border-collapse: collapse; table-layout: fixed;"> <!-- First row --> <tr> <td style="padding: 0;"> <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;"> text <br> text </div> </td> <td style="padding: 0;"> <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;"> text </div> </td> </tr> <!-- Second row --> <tr> <td style="padding: 0;"> <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;"> text <br> text </div> </td> <td style="padding: 0;"> <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;"> text </div> </td> </tr> </table> 每个单元格都包含一个带边框的 div。我希望 div 拉伸以填充整个单元格，以便 div 边框相互接触。我已将所有 div 的高度设置为 100%，但在第二列上它们仍然没有伸展。 我该怎么办？ 我问了这个问题chatgpt。他给了我一大堆无用的质疑。 相关的还有这个问题： 如何在 td 中垂直拉伸 div？ 但答案对我来说不起作用。 给出高度：100%；到餐桌。这可能会解决这个问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table style="width: 100%; border-collapse: collapse; table-layout: fixed;height: 100%;"> <!-- First row --> <tr> <td style="padding: 0;"> <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;"> text <br> text </div> </td> <td style="padding: 0;height: 100%;"> <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;"> text </div> </td> </tr> <!-- Second row --> <tr> <td style="padding: 0;"> <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;"> text <br> text </div> </td> <td style="padding: 0;"> <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;"> text </div> </td> </tr> </table> </body> </html>
在mPDF生成的PDF中，我想将表格单元格分成两个（或更多）页面。 该单元格包含很长的文本，因此其字体大小被迫变小。 然而，我想避免小...
我正在尝试将表单中的值动态添加到 HTML 表中。每次用户提交表单时，这些值都应作为新行添加到表中。但是，我不确定如何附加...
如何在 HTML 表格中使用 colspan 和 rowspan？
我不知道如何合并 HTML 表格中的行和列。 你能帮我用 HTML 制作这样一个表格吗？
一直在谷歌搜索如何将 html 表转换为可分页和可排序的内容，我偶然发现了 jqGrid jquery 插件。到目前为止我已经了解到我们必须调用 tableToGrid...
我想在td中水平对齐三个div。 我还想更改下图中A和B的div： 重要的是 A 位于 SecondOne 的左侧，B 位于 SecondOne 的右侧。我你...
我按照这个例子来实现角度材料表。 https://stackblitz.com/angular/jejeknenmgr?file=src%2Fapp%2Ftable-basic-example.ts 在这里，我使用...
建立一个可以包含多行的表格格式的表单输入，需要将多行输入的值作为对象存储在数组中（教育如代码所示）。 我有困难...
我正在尝试使用 jquery 添加/删除后实现动态行编号设置。下面是我的 php 代码，我可以实现添加行，但是在删除时，重新索引部分被折叠 回声”<
我正在使用 file_get_contents() 导入文本文件。 在文本文件中，格式如下（示例）： 3434,83,8732722 834,93,4983293 9438,43933,34983 等等...基本上它遵循
我有一个 HTML 表格和以下脚本，用于根据单元格的内容向单元格添加特定的类。 现在，我只想计算 class = active 的项目并触发模式（自动...
Perl 的 HTML::TableExtract 看不到职业橄榄球参考页面上的所有表格
我正在尝试使用 HTML::TableExtract 使用 perl 从 HTML 表中提取数据。 具体来说，我正在尝试从 Pro Football Referemce 获取 2024 年巴尔的摩乌鸦队的一些冲刺统计数据。 T...
我知道，SO上也有类似的问题，但答案似乎对我不起作用。我的表格有一个填充多行的单元格，我希望文本区域填充整个单元格。代码...
我有一个 html 表并使用 table.insertRow() 插入一个新行，但新行没有应用任何属性或格式。 如何使用行格式向表中添加行？ 我有一个 html 表并使用 table.insertRow() 插入一个新行，但新行没有应用任何属性或格式。 如何使用行格式向表格添加一行？ <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> <TABLE id="dataTable" width="100%" align="center"> <TR align="center" border="1"> <TH></TH> <TH>ID </TH> <TH>Name</TH> <TH>Status</TH> </TR> <TR align="center"> <TD><INPUT type="checkbox" name="chk"/></TD> <TD> 1 </TD> <TD> <INPUT type="text" value="Submission 1" /> </TD> <TD>Working version</TD> </TR> </TABLE> <script type="text/javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "checkbox"; cell1.appendChild(element1); var cell2 = row.insertCell(1); cell2.innerHTML = rowCount; var cell3 = row.insertCell(2); var element2 = document.createElement("input"); element2.type = "text"; cell3.appendChild(element2); } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } </script> 我发现使用jquery向表添加行更好 $('#dataTable tr:last').after('<TR align="center"><TD><INPUT type="checkbox" name="chk"/></TD><TD>'+ rowCount + '</TD><TD> <INPUT type="text" value="Submission 1" /> </TD><TD>Working version</TD></TR>'); 要设置表行的类名称，您只需编辑 className 属性，如下所示 <script> var table = document.getElementById("tableID"); var rowCount = table.rows.length; var row = table.insertRow(rowCount-1); row.className = "rowdiv"; </script> 考虑到 insertRow() 通常是放置索引的地方，并且 var row = table.insertRow(rowCount);这里使用了，如何将其移动到表格的特定部分？ 如果使用Javascript ES6，您可以使用setAtribute方法来设置元素类名称、id名称或样式。下面是一个例子： <script> var table = document.getElementById("yourTableIDName"); var rowCount = table.rows.length-1; var row = table.insertRow(rowCount); row.setAttribute('class', 'yourClassName') </script>
如何在 Bootstrap 3 中使用固定标题（导航栏）向下滚动表格行时将表格标题（thead）粘在顶部？
带有固定导航栏的引导布局。表格中有很多行。 问题？当我滚动页面导航栏时，它会在那里，因为它是固定的。当我滚动更多时，我希望表格标题是...
我需要使用 元素创建页面布局。我遇到的问题是它在 DOM 中自动生成额外不需要的间距，以 .我怎样才能删除它？ 看到我... 我需要使用 <table> 元素创建页面布局。我遇到的问题是它在 DOM 中自动生成额外不需要的间距，以   的形式。我怎样才能删除它？ 查看图片： 结果： 挑战： 我面临的挑战。我只能使用内联样式，不能使用javascript，而且我不能使用flex代替表格。因为它将在电子邮件中使用。并非所有电子邮件客户端都支持 Flex。 <div style="width:375px;margin:0 auto;font-family: Helvetica,sans-serif;"> <table style="width:100%;background-color: aliceblue;border-bottom: 1px #539ecb solid; border-top: 1px #539ecb solid;color: #334859; text-transform: uppercase;padding:0 15px;"> <!-- Entries Header --> <tr> <td style="padding:3px 0;width: 47%;"> <h5 style="margin:0;">Description</h5> </td> <td style="text-align: center;width: 25%;"> <h5 style="margin:0;">Qty</h5> </td> <td style="text-align: right;"> <h5 style="margin:0;">Amount</h5> </td> </tr> </table> <table style="width: 100%;padding:0 15px;"> <!-- Entries --> <tr> <td style="padding:5px 0;width: 50%;"> <span style="text-transform: uppercase;font-size: 13px;">Office desk</span> </td> <td style="padding:5px 0;text-align: center;width: 25%;"> <small style="margin: 0;font-size: 11px;">2 x $217.75</small> </td> <td style="padding:5px 0;text-align:right;"> <span style="margin: 0;font-size: 13px;">$435.50</span> </td> </tr> </table> </div> 问题似乎是您故意在表格中添加的 。 HTML 对于什么可以或不可以是各种表格元素的直接子元素有严格的规则。 文本节点不能是tr的直接子节点，只能包含: 零个或多个 td、th 和脚本支持元素。 因此， 文本节点被推到表格之外。删除这些，视觉布局将被修复（不过，我仍然建议修复标记的语义）。 原答案如下 无论如何，您的 HTML 格式都是错误的。看似表格标题行和正文行的内容被表示为 2 个单独的表格。尝试这样的事情： <table style="border-collapse: collapse;"> <thead style="/* styles from what's currently your first table */"> <tr> <!-- content from what's currently your first table --> <th>...</th> <th>...</th> <th>...</th> </tr> </thead> <tbody style="/* styles from what's currently your second table */"> <tr> <!-- content from what's currently your second table --> <td>...</td> <td>...</td> <td>...</td> </tr> </tbody> </table> 您可以将 替换为空字符串。 document.querySelector("#our_div").innerHTML = document.querySelector("#our_div").innerHTML.replace(/ /g, ''); <div id="our_div" style="width:375px;margin:0 auto;font-family: Helvetica,sans-serif;display:block;"> <table style="width:100%;background-color: aliceblue;border-bottom: 1px #539ecb solid; border-top: 1px #539ecb solid;color: #334859; text-transform: uppercase;padding:0 15px;"> <!-- Entries Header --> <tr> <td style="padding:3px 0;width: 47%;"> <h5 style="margin:0;">Description</h5> </td> <td style="text-align: center;width: 25%;"> <h5 style="margin:0;">Qty</h5> </td> <td style="text-align: right;"> <h5 style="margin:0;">Amount</h5> </td> </tr> </table> <table style="width: 100%;padding:0 15px;"> <!-- Entries --> <tr> <td style="padding:5px 0;width: 50%;"> <span class="item-name" style="text-transform: uppercase;font-size: 13px;">Office desk</span> </td> <td style="padding:5px 0;text-align: center;width: 25%;"> <small class="qty" style="margin: 0;font-size: 11px;">2 x $217.75</small> </td> <td style="padding:5px 0;text-align:right;"> <span class="item-price" style="margin: 0;font-size: 13px;">$435.50</span> </td> </tr> </table> </div> 这是纯 CSS 解决方案。将 font-size:0 调整为 div，将 font-size:1rem 调整为 table。 CSS 无法删除它，但可以隐藏。 #our_div { font-size:0; } #our_div table { font-size:1rem; } <div id="our_div" style="width:375px;margin:0 auto;font-family: Helvetica,sans-serif;font-size:0;"> <table style="width:100%;background-color: aliceblue;border-bottom: 1px #539ecb solid; border-top: 1px #539ecb solid;color: #334859; text-transform: uppercase;padding:0 15px;"> <!-- Entries Header --> <tr> <td style="padding:3px 0;width: 47%;"> <h5 style="margin:0;">Description</h5> </td> <td style="text-align: center;width: 25%;"> <h5 style="margin:0;">Qty</h5> </td> <td style="text-align: right;"> <h5 style="margin:0;">Amount</h5> </td> </tr> </table> <table style="width: 100%;padding:0 15px;"> <!-- Entries --> <tr> <td style="padding:5px 0;width: 50%;"> <span class="item-name" style="text-transform: uppercase;font-size: 13px;">Office desk</span> </td> <td style="padding:5px 0;text-align: center;width: 25%;"> <small class="qty" style="margin: 0;font-size: 11px;">2 x $217.75</small> </td> <td style="padding:5px 0;text-align:right;"> <span class="item-price" style="margin: 0;font-size: 13px;">$435.50</span> </td> </tr> </table> </div> 用 JS 来做会好得多。在 CSS 中，您可以尝试为 div 容器设置一些字体样式以隐藏“ ”字符，并将样式设置为表格的初始值（这样它们就不会从容器继承值）。div{ font-size:0; line-height:0; color: transparent; user-select: none; } div>table{ font-size: 16px; //or any other line-height: normal; //or any other color: black; //or any other user-select: auto; } <div style="width:375px;margin:0 auto;font-family: Helvetica,sans-serif;"> <table style="width:100%;background-color: aliceblue;border-bottom: 1px #539ecb solid; border-top: 1px #539ecb solid;color: #334859; text-transform: uppercase;padding:0 15px;"> <!-- Entries Header --> <tr> <td style="padding:3px 0;width: 47%;"> <h5 style="margin:0;">Description</h5> </td> <td style="text-align: center;width: 25%;"> <h5 style="margin:0;">Qty</h5> </td> <td style="text-align: right;"> <h5 style="margin:0;">Amount</h5> </td> </tr> </table> <table style="width: 100%;padding:0 15px;"> <!-- Entries --> <tr> <td style="padding:5px 0;width: 50%;"> <span style="text-transform: uppercase;font-size: 13px;">Office desk</span> </td> <td style="padding:5px 0;text-align: center;width: 25%;"> <small style="margin: 0;font-size: 11px;">2 x $217.75</small> </td> <td style="padding:5px 0;text-align:right;"> <span style="margin: 0;font-size: 13px;">$435.50</span> </td> </tr> </table> </div> 你好世界
如何根据“<th>”元素中的文本动态调整 HTML 表格列宽？
我有一个数据库加载到 HTML 表中。表的每一列都有一个表标题，其中包含文本。我希望每列的最小宽度等于该文本的长度（这样就不会