由于它与HTML有关，因此表格用于以表格方式显示数据。关于HTML表的问题应该通过显示有问题的源代码来询问，或者，如果问题是关于根据需求创建表失败的尝试，提问者需要显示失败的尝试，描述期望和行为如何不同。
我需要从JS填写一个HTML表格（我刚刚开始使用JS）。 这是基于我发现的示例的代码： 长度 = 表.长度 const Table = document.getElementById("TblBody") 对于（...
我想创建一个最小高度为90vh的表格，因此它不会小于该特定高度，但是当我这样做时，列的高度会增加并根据表格高度占用空间......
我有一张又长又宽的桌子，里面的宽度：100%；溢出-x：自动；容器，我试图同时实现以下目标： 使标题行粘在视口的顶部边缘； 使...
我正在开展 HTML 电子邮件活动（不允许使用 CSS），因此我被迫使用表格，这是我不太熟悉的东西。除了表格边框之外，我的一切看起来都正确。每当我创造...
Angular - ng 级在 td 上工作，但不在 tr 上工作
以下 HTML 用于 ng-repeat 内部。 这有效： {{ info.date_formatted }} ... 但这不起作用： 以下 HTML 用于 ng-repeat 内部。 这有效： <tr> <td ng-class="info.lastInMonth">{{ info.date_formatted }}</td> ... 但这行不通： <tr ng-class="info.lastInMonth"> <td>{{ info.date_formatted }}</td> ... 完全相同的表达式在 td 中有效，但在 tr 中无效。 有人知道为什么吗？ 如果样式特定于 td，那么将它们与 td 一起使用会更安全。因为 td 会覆盖应用于 tr 的样式。 考虑下面的css类： .test{ background: #ccddee; padding: 5px; border: solid #5a5a5a 5px; } 现在将此应用到 tr <table> <tr class="test"><td>cell content</td></tr> </table> 将产生类似的输出，没有应用边框和填充： 如果您同样适用于td <table> <tr><td class="test">cell content</td></tr> </table> 您可以看到应用的边框和填充： 它实际上在我的代码中有效。尝试找出它们之间的差异。顺便说一句，这可能是 Angular 版本造成的。 var meadow = angular.module('meadow', []); meadow = meadow.controller("abc", function($scope) { $scope.info = { lastInMonth: "a", date_formatted: "b" } }); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="meadow" ng-controller="abc"> <table> <tr ng-class="info.lastInMonth"> <td>{{ info.date_formatted }}</td> </tr> </table> </div>
Salesforce Visualforce PDF 表格中的分页符
我有一个呈现为 pdf 格式的 Visualforce 页面。该页面包含多行表。我设置了 内部分页：避免； 已经将 css 属性添加到 tr 标签中。边框在底部和...
我正在使用有角度的材料表。当我们在查看模式和可编辑模式之间切换时，切换到任何模式都需要时间并且会延迟。 （性能问题）。 这只是需要时间...
示例页面显示问题：https://andy3k.com/index.htm 显示期望结果的示例页面：https://andy3k.com/travel/japan2024/index.htm CSS：https://www.andy3k.com/Andy3k.css JavaScript 菲...
我正在尝试将 html 中的表格从浏览器（适用于 Chrome）完全复制到 Word 文档。发生的情况是最后一行的边框未在 Word 中传递。 取代码： HTML： 我正在尝试将 table 中的 html 从浏览器（适用于 Chrome）完全复制到 Word 文档。发生的情况是最后一行的边框未在 Word 中传递。 获取代码： HTML： <table id="t6"> <tr><th></th><th>raw_alpha</th><th>std.alpha</th><th>G6(smc)</th><th>average_r</th></tr> <tr><td>gse1</td><td>0.88</td><td>0.88</td><td>0.88</td><td>0.45</td></tr> <tr><td>gse10</td><td>0.88</td><td>0.88</td><td>0.88</td><td>0.45</td></tr> </table> CSS： table, th, tr, td { background-color:white; border-spacing: 0; padding: 2px 6px; border-collapse:collapse; text-align: right; } th { background-color: white; color: black; border-width:1px; border-color: #000; border-style: solid none solid none; } tr:last-child { border: 1px solid #000; border-style: none none solid none; } 有什么办法可以让最后一行的边框包含进来吗？这也有可能在 Firefox 中工作吗？ 应用于 tr 元素的边框显然无法识别，因此您需要将它们应用于 td。 在 CSS 中，将 tr:last-child 更改为 tr:last-child td，它应该可以工作。
表格标题已修复，但边框在 chrome 上移动并且不会出现在 Firefox 上
我需要修复标题表上的边框，在 Chrome 上，当我向下滚动时，顶部边框消失，而在 Firefox 上，它根本不出现。 你可以在这里看到它 https://codepen.io/anon/pen/zy...
表格不会粘贴到谷歌文档中并保留类的边框。仅适用于 firefox 的直接样式
我在这里有点困惑。 我有这个 CSS + HMTL 代码： 表头 { 宽度：100%； 边界崩溃：崩溃； } 表头 td { 边框：1px实线；背景颜色：#EEE；字体粗细：
我正在使用有角度的材料表。当我们在查看模式和可编辑模式之间切换时，需要花费一些时间，而切换到任何模式都会出现延迟。 （性能问题）。 这只是需要时间...
我正在玩 django 一点，想创建一个表，我可以在其中填充一些东西。我对 django 和 html 编程非常陌生。我有 4 个 for 循环（听起来很多） {%...
我想当表格水平滚动时将表格的第一列和第二列固定在左侧。我使用position:sticky来固定柱子，它在普通柱子上工作得很好。不过，我还有我...
我有一个如下所示的表格 html： ... 我有一个如下所示的表格 html： <table> <tbody> <tr> <th>Header 1</th> <td>Data 1</td> <th>Header 2</th> <td>Data 2</td> </tr> <tr> <th>Header 3</th> <td>Data 3</td> <th>Header 4</th> <td>Data 4</td> <th>Header 5</th> <td>Data 5</td> </tr> </tbody> </table> 我希望表格看起来像这样： Header1 Header2 td1 td2 Header3 Header4 Header5 td3 td4 td5 可以使用 CSS 来实现而不改变 html 结构吗？ 您需要遵循有关表结构的规则。 表格中TH从左到右显示 TR在表格中从上到下显示 TD在表格中从左到右显示 您需要创建一个嵌套表来实现与此类似的布局 <body> <table > <tbody> <tr> <td> <table> <th>Header 1</th> <tr>Data 1</tr> </table> </td> <td> <table> <th>Header 2</th> <tr>Data 2</tr> </table> </td> </tr> <tr> <td> <table> <th>Header 3</th> <tr>Data 3</tr> </table> </td> <td> <table> <th>Header 4</th> <tr>Data 4</tr> </table> </td> <td> <table> <th>Header 5</th> <tr>Data 5</tr> </table> </td> </tr> </tbody> </table> </body> 或者只使用样式或 BR 标签 <table > <tbody> <tr> <td> Header 1 <br> Data 1 </td> <td> Header 2 <br> Data 2 </td> </tr> <tr> <td> Header 3 <br> Data 3 </td> <td> Header 3 <br> Data 3 </td> <td> Header 3 <br> Data 3 </td> </tr> </tbody> </table> 标题 1 数据1 标题 2
如何确保我的表格标题与嵌套 html 表格中的表格数据对齐？
对于上下文，我需要一个嵌套表来对表数据进行分组（按 pdo、程序、位置）。问题是当列未完全展开时，我的 th 与嵌套的 td 不对齐。我正在使用安古拉...
我正在尝试在 p 元素内显示内联表格。结果应该与此类似： *-----------------* 之前发短信。 |单元 1 |单元 2 |之后发短信。 *--------...
` `<Box className={`label-container border-bottom`}> <table> <tbody> <tr> <td colSpan={1} rowSpan={3} className="rotate no-border-top no-border-right no-border-bottom font-bold" style={{ height: 100, }}> <span>COLOR: RED-BLUE-PINK-PURPLE GREEN-BLACK-BLUE RED-BLUE-PINK-PURPLE GREEN-BLACK-BLUE RED-BLUE-PINK-PURPLE GREEN-BLACK-BLUE RED-BLUE-PINK-PURPLE GREEN-BLACK-BLUE</span> </td> <td colSpan={1} rowSpan={3} className="rotate no-border font-bold"> <span><Trans>ID</Trans>:{item?.id}</span> </td> <td colSpan={1} rowSpan={3} className="rotate no-border font-bold"> <span><Trans>Qty</Trans>: {item.qty}</span> </td> </tr> <tr> <td colSpan={1} rowSpan={3} className="rotate no-border-top no-border-right no-border-bottom font-bold" style={{ height: 100, }}> <span><Trans>School ID</Trans>: {item?.schoolID}</span> </td> <td colSpan={1} rowSpan={3} className="rotate no-border font-bold"> <span><Trans>Address</Trans>: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span> </td> <td colSpan={1} rowSpan={3} className="rotate no-border font-bold"> <span><Trans>Number</Trans>: 123456789123</span> </td> </tr> </tbody> </table> </Box>` 我创建一个表格，将单元格旋转 -180 度。那么输出是这样的 在此输入图片描述 它没有换行长文本。 我尝试将宽度调整为100，但没有任何变化。然后我尝试将高度应用到 100，然后发生了变化，但它与文本重叠。 <td colSpan={1} rowSpan={3} className="rotate no-border-top no-border-right no-border-bottom font-bold" style={{ height: 100 }}> 在此输入图片描述 我也尝试添加这个css white-space: normal; overflow-wrap: break-word; hyphens: auto; word-break: break-word; 但是没有成功。 export const Box = styled.div` color: #000; table { width: 4in; text-align: left; margin: auto; font-family: 'Hansom FY' !important; td { padding: 2px; word-wrap: break-word; vertical-align: top; font-family: 'Arial'; &:not(.no-border) { border: 2px solid #000; } } } .rotate { font-size: 8px !important; padding: 0 !important; -webkit-transform: rotate(-180deg) translate(-20%, 5%); -moz-transform: rotate(-180deg) translate(-20%, 5%); -ms-transform: rotate(-180deg) translate(-20%, 5%); -o-transform: rotate(-180deg) translate(-20%, 5%); transform: rotate(-180deg) translate(-20%, 5%); writing-mode: vertical-lr; } ` 为了确保旋转的表格单元格中的文本正确换行，您需要进行一些调整。主要问题是旋转元素可能会导致溢出问题，尤其是对于有点长的文本字符串。仅调整宽度和高度可能无法解决问题，因为文本可能仍然重叠或超出单元格。 您应该检查文本换行是否使用断字、空白和溢出换行等属性进行了更新。 另外，微调单元格的旋转和变换，以确保文本保持在其边界内。变换属性在这里很重要，因为可以调整它以更准确地旋转和定位文本，从而防止未对齐。例如，您可以使用旋转（-180deg）平移（-10％，-10％）之类的转换将文本旋转180度，然后稍微移动其位置以更好地适应单元格。 您还可以确保表格中的高度和宽度设置正确...如果您的文本仍然重叠，您可以尝试调整转换中的翻译值。需要代码的话请LMK！
我是 Element Plus 的新手，在使用 el-table 时遇到一些问题。有使用 Element Plus 经验的人可以给我一些想法吗？我使用 VueJS 和 Element Plus。提前谢谢大家...
我有一个 *.jsp 文件。 表单元格中的下拉列表取决于表列的名称...</desc> <question vote="1"> <p>我有一个 *.jsp 文件。</p> <pre><code><!DOCTYPE html> <html lang="en"> <html> <head> <title> Drop Down List in Table Cell Depending on Name of Table Column </title> </head> <body> <table id="Sample Table" border="1"> <tr> <c:forEach var="element" items="${requestScope.tableColumnNames}"> <th>${element}</th> </c:forEach> </tr> <c:forEach var="elements" items="${requestScope.tableRowValues}"> <tr> <c:forEach var="element" items="${elements}"> <td>${element}</td> </c:forEach> </tr> </c:forEach> </table> </body> </html> </code></pre> <p>参数tableColumnNames是一个数组： String[] tableColumnNames = new String[]{"表列一","表列二"};</p> <p>参数tableRowValues是一个数组： String[][] tableRowValues = new String[][]{{"样本值", "是/否"}};</p> <p>我只想将第二列的列名称为“表列二”的数据显示在下拉列表中。</p> <p>我的假设是从每个单元格获取对列的引用，然后使用 if 条件：</p> <pre><code><c:forEach var="element" items="${elements}"> <td>${element} <c:if <reference from cell to column (name)>="Table Column Two"> <select> <option value="optionYes"> Yes </option> <option value="OptionNo"> No </option> </select> </c:if> </td> </c:forEach> </code></pre> <p>我不确定这个方法是否正确。 请指教。非常感谢您的帮助。</p> </question> <answer tick="false" vote="0"> <p>睡一晚思考一下，然后奇迹就会发生。</p> <p>我找到了以下解决方案：</p> <pre><code><c:forEach var="element" items="${elements}" varStatus="loop"> <td> <c:choose> <c:when test="${requestScope.tableColumnNames[loop.index] == 'Table Column Two'}"> <select> <option value="optionYes"> Yes </option> <option value="OptionNo"> No </option> <option value="" selected disabled hidden> ${element} </option> </select> </c:when> <c:otherwise> ${element} </c:otherwise> </c:choose> </td> </c:forEach> </code></pre> <p>根据需要，在名称为“表列二”的列中，数据显示在下拉列表中。</p> </answer> </body></html>