html-table 相关问题

由于它与HTML有关，因此表格用于以表格方式显示数据。关于HTML表的问题应该通过显示有问题的源代码来询问，或者，如果问题是关于根据需求创建表失败的尝试，提问者需要显示失败的尝试，描述期望和行为如何不同。

响应式表溢出-x 在 flex-basis 内不起作用。桌子 { 边界崩溃：崩溃；边框间距：0；宽度：100%；边框：1px实线#ddd； ...</desc> <question vote="0"> <p>响应式表溢出-x 在 flex-basis 内不起作用。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><style> table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; } .container { display: flex; flex-wrap: wrap; height: 100%; min-width: 320px; } .grid6 { flex-basis: 100%; padding: 4px; } th, td { text-align: left; padding: 8px; } </style> </head> <body> <h2>Responsive Table</h2> <div class="container"> <div class="grid6"> <div class="table__outer"> <div style="overflow-x:auto;"> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> </tr> </table> </div> </div> </div> </div></code></pre> </div> </div> <p></p> </question> <answer tick="false" vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <style> .grid__container { display: flex; flex-wrap: wrap; height: 100%; min-width: 320px; overflow: auto; } .grid6 { flex-basis: 100%; padding: 4px; overflow-x: auto; } table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; white-space: nowrap; } th, td { text-align: left; padding: 8px; } </style> </head> <body> <h2>Responsive Table</h2> <div class="grid__container"> <div class="grid6"> <div class="table__outer"> <div style="overflow-x:auto;"> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> </tr> </table> </div> </div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>

html html-table flexbox

回答 0 投票 0

表格中的 Iframe

我正在尝试在表格的 tbody 部分添加一个 iframe。到目前为止，这是我的代码 <p>我正在尝试在表格的 tbody 部分添加一个 iframe。这是到目前为止我的代码</p> <pre><code><tbody> <tr> <td><div> <iframe class="tabContent" name="tabIframe2" frameborder="0"></iframe> <p>Text</p> </iframe> </div></td> </tr> </tbody> </code></pre> <p>但是，文本不会出现在 iframe 中。它位于 iframe 下方，在我的表格内。我该如何解决这个问题？</p> </question> <answer tick="false" vote="0"> 需要使用 <p> 标签 <pre><code>iframe</code></pre> 才能将另一个 HTML 页面插入到您的页面中。 <a href="http://www.w3schools.com/tags/tag_iframe.asp" rel="nofollow">http://www.w3schools.com/tags/tag_iframe.asp</a></p> <p>使用示例：</p> <pre><code><iframe src="http://stackoverflow.com"></iframe> </code></pre> <p>您不能在 <pre><code>iframe</code></pre> 标签内编写任何 HTML。</p> </answer> <answer tick="false" vote="0"> <p><pre><code><iframe></code></pre> 用于将一个文件嵌入到另一个文件中。在 iframe 所在的文件中，您必须给出要插入的页面的来源。</p> <p>像这样使用它 - <strong>你的文件</strong></p> <pre><code><tr> <td><div> <iframe class="tabContent" name="tabIframe2" frameborder="0" src="test.html"> </iframe> </div></td> </tr> </code></pre> <p><strong>要嵌入“test.html”的文件</strong></p> <pre><code><p>Text</p> </code></pre> </answer> </body></html>

html iframe html-table

回答 0 投票 0

我需要创建一个pdf文件，在pdf文件中我需要使用migradoc pdf Sharp nuget包提供包含行和列的表格

我想将表行列添加到我的 pdf 中，您可以建议任何用于创建 pdf 文件的编码吗？我还需要在页眉部分添加徽标，我需要一个 6 页的 pdf，带有所需的页脚，并且在...

html-table pdf-generation migradoc

回答 1 投票 0

如何从动态创建的表传递参数

下面的代码有效，但我总是得到表中最后一个按钮的值。我如何从每个按钮记录正确的表计数。 console.log 始终给出最后一个按钮的值。下面的代码有效，但我总是得到表中最后一个按钮的值。我如何从每个按钮记录正确的表计数。 console.log 总是给出最后一个按钮的值。 <!DOCTYPE html> <html> <head> <style> table, td { border: 1px solid black; } </style> </head> <body> <p>Click "add row" to add several new rows, then click "show count"</p> <button type="button" onclick="addTr()">add row</button> <table id="myTable"> </table> <script> function showCount(trCount) { console.log("trCount = " + trCount); } var trCount = 0; function addTr() { var table = document.getElementById("myTable"); var tr = table.insertRow(trCount); var td0 = tr.insertCell(0); td0.innerHTML = (trCount + 1); var td1 = tr.insertCell(1); td1.innerHTML = '<input type="button" value="Show Count" onclick="showCount(trCount)">'; trCount++; } </script> </body> </html> 输入此代码： function showCount(trCount){ console.log("trCount = "+trCount); } var trCount = 1; function addTr() { var table = document.getElementById("myTable"); var tr = table.insertRow(trCount-1); var td0 = tr.insertCell(0); td0.innerHTML = trCount; var td1 = tr.insertCell(1); // Pass trCount as an argument to showCount td1.innerHTML = '<input type="button" value="Show Count" onclick="showCount(' + trCount + ')">'; trCount++; }

javascript html-table

回答 1 投票 0

HTML - 表格中行之间的间距

我有一个使用 rowspan 来合并 2 行的表。我希望两个非组合行之间的间距更近，同时保持整个行之间更大的间距。例如，我会...

html css html-table

回答 1 投票 0

HTML 电子邮件：填充在 gmail 中不起作用

<table> <tr> <td valign="top" align="center"> <span style="color: black; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 8px; font-size: 35px;font-family: 'open sans', arial, sans-serif;">TIECON</span> </td> </tr> <tr> <td valign="top" align="center"> <span style="color: black; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 8px; font-size: 35px;font-family: 'open sans', arial, sans-serif;">AHMEDABAD</span> </td> </tr> <tr> <td valign="top" align="center"> <span style="color: black; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 8px; font-size: 35px;font-family: 'open sans', arial, sans-serif;">2016</span> </td> </tr> </table> 我可以在浏览器中看到填充，但在 gmail 中看不到。 PS：当我制作 HTML Emailer 时，我必须坚持使用 table 和 inline css 。谢谢你。尝试使用line-height:35px <table> <tr> <td valign="top" align="center"> <span style="color: black; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 8px; font-size: 35px;font-family: 'open sans', arial, sans-serif; line-height:35px;">TIECON</span> </td> </tr> <tr> <td valign="top" align="center"> <span style="color: black; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 8px; font-size: 35px;font-family: 'open sans', arial, sans-serif;line-height:35px;">AHMEDABAD</span> </td> </tr> <tr> <td valign="top" align="center"> <span style="color: black; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 8px; font-size: 35px;font-family: 'open sans', arial, sans-serif;line-height:35px;">2016</span> </td> </tr> </table> Gmail 中的填充仅适用于 td 元素。因此，只需为 table 元素内的 td 元素指定填充即可。

html css html-table

回答 2 投票 0

无法使用引导程序将文本颜色应用于表格行

我正在使用bootstrap 5.3。我想在整个表格行中应用文本颜色。 Java PHP <...

html-table bootstrap-5

回答 1 投票 0

如何使用 jQuery 选择表格列

我想选择一个表格列，我只知道该列的标题文本。（th.innerText）我尝试了以下代码，但它不起作用： OwnerIndex = $('th:contains("Owner")').index(); $('...

jquery html-table jquery-selectors

回答 5 投票 0

如何使用javascript隐藏/显示表格中的某些行[关闭]

我需要动态隐藏/显示该表中的表行。我怎样才能用javascript做到这一点？我似乎无法弄清楚。我正在使用 MS Dynamics 内的一个表。这个html是自动生成的...