html-table 相关问题

小输入元素在手机上的 td 元素内不可见。 HTML CSS

我有一个数独项目，其中有一个 9x9 数字表 元素，我在某些 处生成输入，这使得它 ...

如何展开和折叠表行（所有行，而不是每一行），同时最新行在纯 js 中始终保持可见？

我有一个输入字段，用于输入数据。 该数据将进入表并创建一个新行，其中包含数据。 最新的行始终位于顶部。 我希望表格仅显示最新行...

如何制作<div>填充<td>高度

我浏览了 StackOverflow 上的几篇文章，但未能找到这个相当简单问题的答案。 我有一个像这样的 HTML 结构： 我浏览了 StackOverflow 上的几篇帖子，但未能找到这个相当简单的问题的答案。 我有一个像这样的 HTML 结构： <table> <tr> <td class="thatSetsABackground"> <div class="thatSetsABackgroundWithAnIcon"> <dl> <dt>yada </dt> <dd>yada </dd> </dl> <div> </td> <td class="thatSetsABackground"> <div class="thatSetsABackgroundWithAnIcon"> <dl> <dt>yada </dt> <dd>yada </dd> </dl> <div> </td> </tr> </table> 我需要的是 div 填充 td 的高度，这样我就可以将 div 的背景（图标）定位在 td 的右下角。 你建议我如何去做？ 如果您给 TD 的高度为 1px，那么子 div 将有一个高度较高的父级来计算它的百分比。因为您的内容会大于 1px，所以 td 会自动增长，div 也会如此。有点垃圾黑客，但我打赌它会起作用。 CSS height: 100% 仅当元素的父元素具有明确定义的高度时才有效。例如，这将按预期工作： td { height: 200px; } td div { /* div will now take up full 200px of parent's height */ height: 100%; } 由于您的 <td> 似乎将是可变高度，如果您添加带有绝对定位图像的右下角图标，如下所示： .thatSetsABackgroundWithAnIcon { /* Makes the <div> a coordinate map for the icon */ position: relative; /* Takes the full height of its parent <td>. For this to work, the <td> must have an explicit height set. */ height: 100%; } .thatSetsABackgroundWithAnIcon .theIcon { position: absolute; bottom: 0; right: 0; } 表格单元格标记如下： <td class="thatSetsABackground"> <div class="thatSetsABackgroundWithAnIcon"> <dl> <dt>yada </dt> <dd>yada </dd> </dl> <img class="theIcon" src="foo-icon.png" alt="foo!"/> </div> </td> 编辑：使用 jQuery 设置 div 的高度 如果将 <div> 保留为 <td> 的子级，则此 jQuery 片段将正确设置其高度： // Loop through all the div.thatSetsABackgroundWithAnIcon on your page $('div.thatSetsABackgroundWithAnIcon').each(function(){ var $div = $(this); // Set the div's height to its parent td's height $div.height($div.closest('td').height()); }); 你可以尝试让你的div浮动： .thatSetsABackgroundWithAnIcon{ float:left; } 或者，使用内联块： .thatSetsABackgroundWithAnIcon{ display:inline-block; } 内联块方法的工作示例： table, th, td { border: 1px solid black; } <table> <tr> <td> <div style="border:1px solid red; height:100%; display:inline-block;"> I want cell to be the full height </div> </td> <td> This cell <br/>is higher <br/>than the <br/>first one </td> </tr> </table> 尽管这个问题/解决方法已经很老了，但仍然有效（而且很烦人），我想从规范中添加一些内容。 正如 @psayre23 提到的，将 1px 添加到“hack”table 的 height 将强制浏览器引擎随后实际计算 td 的高度并修复此“问题”。它看起来不直观，但它是设计使然（并且不限于table）： 来自 “内容高度：'height'属性”（CSS 2.1 规范），<percentage> 部分说： 如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为“auto”。 这句话也可以在MDN的身高文档上找到。 确实必须用 JS 来做这件事。这是一个解决方案。我没有使用你的类名，但我在 td 类名中调用了 div 的“全高”:-) 显然，使用了 jQuery。请注意，这是从 jQuery(document).ready(function(){ setFullHeights();}); 调用的 另请注意，如果您有图像，则必须首先使用以下内容迭代它们： function loadedFullHeights(){ var imgCount = jQuery(".full-height").find("img").length; if(imgCount===0){ return setFullHeights(); } var loaded = 0; jQuery(".full-height").find("img").load(function(){ loaded++; if(loaded ===imgCount){ setFullHeights() } }); } 您可能想从 docReady 调用loadedFullHeights()。这实际上是我最终使用的以防万一。一定要提前想清楚！ function setFullHeights(){ var par; var height; var $ = jQuery; var heights=[]; var i = 0; $(".full-height").each(function(){ par =$(this).parent(); height = $(par).height(); var tPad = Number($(par).css('padding-top').replace('px','')); var bPad = Number($(par).css('padding-bottom').replace('px','')); height -= tPad+bPad; heights[i]=height; i++; }); for(ii in heights){ $(".full-height").eq(ii).css('height', heights[ii]+'px'); } } 这个问题已经在这里得到解答。只需将 height: 100% 放入 div 和容器 td 中即可。 修改本身的背景图片。 或者对 div 应用一些 css： .thatSetsABackgroundWithAnIcon{ height:100%; }

CSS：固定行高

我有这个标记： 桌子 { 边框：1px纯黑； 宽度：400px； 高度：300px； 边框折叠：折叠； } 表体 { </desc> <question vote="26"> <p>我有这个标记：</p> <pre><code>&lt;style&gt; table { border:1px solid black; width:400px; height:300px; border-collapse:collapse; } table tbody { border:1px solid red; } table td { background:yellow; padding:10px; border-bottom:1px solid green; height:20px; } &lt;/style&gt; &lt;table&gt; &lt;tbody&gt; &lt;tr&gt;&lt;td&gt;test&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;test&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>我需要的是行的高度不会拉伸。 有没有办法固定行高？</p> </question> <answer tick="false" vote="34"> <p>如果表格高度大于行高，则 HTML 表格行高通常会与表格高度成比例变化。由于表格强制设置行高，因此您可以删除表格高度来解决该问题。如果这是不可接受的，您还可以给行明确的高度，并添加第三行，将 <em>auto</em> 调整为剩余的表格高度。 </p> <p>CSS2 中的另一个选项是 Max-Height 属性，尽管它可能会导致表格中出现奇怪的行为。<a href="http://www.w3schools.com/cssref/pr_dim_max-height.asp" rel="noreferrer">http://www.w3schools.com/cssref/pr_dim_max-height.asp</a></p> <p>。 </p> </answer> <answer tick="false" vote="24"> <p>只需将 <pre><code>style=&#34;line-height:0&#34;</code></pre> 添加到每个单元格即可。这在 IE 中有效，因为它将现有和不存在文本的行高设置为大约 19px，并强制单元格在大多数版本的 IE 中垂直扩展。无论是否有文本，IE 都需要执行此操作才能正确显示高度小于 20 像素的行。 </p> </answer> <answer tick="false" vote="8"> <p>如果您需要的话，您也可以尝试这个：</p> <pre><code>&lt;style type=&#34;text/css&#34;&gt; .... table td div {height:20px;overflow-y:hidden;} table td.col1 div {width:100px;} table td.col2 div {width:300px;} &lt;/style&gt; &lt;table&gt; &lt;tbody&gt; &lt;tr&gt;&lt;td class=&#34;col1&#34;&gt;&lt;div&gt;test&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td class=&#34;col2&#34;&gt;&lt;div&gt;test&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> </answer> <answer tick="false" vote="5"> <p>我还没有尝试过，但如果你在表格单元格集中放置一个div，以便它在需要时有滚动条，那么你可以在其中插入，在div上有固定的高度，它应该使你的表格行保持在固定高度。</p> </answer> <answer tick="false" vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> table tbody { border:1px solid red; } table td { background:yellow; border-bottom:1px solid green; } .tr0{ line-height:0; } .tr0 td{ background:red; }</code></pre> <pre><code>&lt;table&gt; &lt;tbody&gt; &lt;tr&gt;&lt;td&gt;test&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;test&lt;/td&gt;&lt;/tr&gt; &lt;tr class=&#34;tr0&#34;&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>此方法非常适合具有固定高度的行，并阻止表格布局移动。 您必须添加一个 <pre><code>&lt;tr class=&#34;auto-height&#34;&gt;&lt;/tr&gt;</code></pre> 来填充表格的其余部分，这样您的行就不必扩展并且可以保存其固定高度。</p> <pre><code>&lt;table&gt; &lt;tr class=&#34;fixed-height&#34; &gt; foo1 &lt;/tr&gt; &lt;tr class=&#34;fixed-height&#34; &gt; foo2 &lt;/tr&gt; &lt;tr class=&#34;fixed-height&#34; &gt; foo3 &lt;/tr&gt; &lt;tr class=&#34;auto-height&#34; &gt; // responsible for filling up the table &lt;/tr&gt; &lt;/table&gt; </code></pre> <pre><code>.fixed-height { height: 50px; /*fixed height for table rows */ } .auto-height { height: calc(100% - 100px); /* Remaining height assigned to a non visible row */ } </code></pre> </answer> </body></html>

为什么滚动功能不起作用？

我对编码还很陌生，所以我没有足够的经验来准确地看出问题是什么。 第 1 部分（共 3 部分）： 首先，请允许我与您分享滚动功能的工作原理。这是

居中对齐 HTML 表格

在我目前正在处理的页面上，我似乎无法将第一行中有图像且下方有两列文本的表格居中（这两列不应该更多）比图像的...

如何使用百分比设置表格单元格的最大宽度？

测试 长长的绳子哈哈哈哈哈哈 TD { 最大宽度：67%； } </style&...</desc> <question vote="131"> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;td&gt;Test&lt;/td&gt; &lt;td&gt;A long string blah blah blah&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;style&gt; td { max-width: 67%; } &lt;/style&gt; </code></pre> <p>以上方法不起作用。如何使用百分比设置表格单元格的 <pre><code>max-width</code></pre>？</p> </question> <answer tick="false" vote="144"> <p>我知道的老问题，但现在可以使用 table 标签上的 css 属性 <pre><code>table-layout: fixed</code></pre> 来实现。从这个问题回答下面<a href="https://stackoverflow.com/questions/17077506/css-percentage-width-and-text-overflow-in-a-table-cell">CSS百分比宽度和表格单元格中的文本溢出</a></p> <p>这可以通过使用 <pre><code>table-layout: fixed</code></pre> 轻松完成，但有点棘手，因为没有多少人知道这个 CSS 属性。</p> <pre><code>table { width: 100%; table-layout: fixed; } </code></pre> <p>在更新的小提琴中查看它的实际操作：<a href="http://jsfiddle.net/Fm5bM/4/" rel="noreferrer">http://jsfiddle.net/Fm5bM/4/</a></p> </answer> <answer tick="true" vote="84"> <p>根据CSS 2.1规范中<a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-max-width" rel="noreferrer">max-width的定义</a>，“'min-width'和'max-width'对表格、内联表格、表格单元格、表格列和列组的影响是未定义的。 ”所以你不能直接在 td 元素上设置 max-width。</p> <p>如果您只想让第二列最多占据 67%，那么您可以将宽度（对于表格单元格来说实际上是最小宽度）设置为 33%，例如在示例中</p> <pre><code>td:first-child { width: 33% ;} </code></pre> <p>为两列设置该值效果不太好，因为它往往会使浏览器为各列提供相同的宽度。</p> </answer> <answer tick="false" vote="9"> <p>我知道这实际上已经是一年后的事了，但我想我应该分享一下。我试图做同样的事情，并发现了这个对我有用的解决方案。我们为整个表格设置最大宽度，然后使用单元格大小以获得所需的效果。</p> <p>将表格放入其自己的 div 中，然后根据整个表格的需要设置 div 的宽度、最小宽度和/或最大宽度。然后，您可以设置其他单元格的宽度和最小宽度，以及有效地前后移动的 div 的最大宽度，以达到我们想要的最大宽度。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>#tablediv { width:90%; min-width:800px max-width:1500px; } .tdleft { width:20%; min-width:200px; }</code></pre> <pre><code>&lt;div id=&#34;tablediv&#34;&gt; &lt;table width=&#34;100%&#34; border=&#34;1&#34;&gt; &lt;tr&gt; &lt;td class=&#34;tdleft&#34;&gt;Test&lt;/td&gt; &lt;td&gt;A long string blah blah blah&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> <p>诚然，这并没有给你一个单元格本身的“最大”宽度，但它确实允许一些可以代替这样的选项的控制。不确定它是否能满足您的需求。我知道它适用于我们的情况，我们希望页面中的导航侧可以放大和缩小到一定程度，但对于现在所有的宽屏幕来说。</p> </answer> <answer tick="false" vote="1"> <p>百分比应该是相对于绝对大小的， 试试这个：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>table { width:200px; } td { width:65%; border:1px solid black; }</code></pre> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;td&gt;Testasdas 3123 1 dasd as da&lt;/td&gt; &lt;td&gt;A long string blah blah blah&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>我找到的解决方案是在 <pre><code>div</code></pre> 内使用 <pre><code>td</code></pre> 并具有以下 CSS 属性：</p> <pre><code>max-width: 300px; // Desired max width width: max-content; </code></pre> <p>您可以将不同 <pre><code>td</code></pre> 的宽度设置为 <pre><code>100%</code></pre> ，这将占用表格中的剩余空间。</p> </answer> <answer tick="false" vote="0"> <p>我已经为我的项目找到了一个解决方案，即单元格如何动态宽度，例如（宽度：最小内容）行为。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>table { width: 100%; border: 1px solid black; } table td { width: 100%; } table td:first-child { width: auto; white-space: nowrap; } table td:nth-child(2) { width: auto; white-space: nowrap; } table, th, td { border: 1px solid black; padding-right: 5px; } td:last-child { padding-right: unset; }</code></pre> <pre><code> &lt;table&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td &gt; &lt;div class=&#34;&#34;&gt;dymaic cell&lt;/div&gt; &lt;/td&gt; &lt;td&gt;one way&lt;/td&gt; &lt;td&gt;sweater, jumper,worm&lt;/td&gt; &lt;td class=&#34;text-right&#34;&gt; &lt;button&gt;&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td &gt; &lt;div class=&#34;&#34;&gt;dymaic text&lt;/div&gt; &lt;/td&gt; &lt;td&gt;one way&lt;/td&gt; &lt;td&gt;sweater, jumper,worm&lt;/td&gt; &lt;td class=&#34;text-right&#34;&gt; &lt;button&gt;&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td &gt; &lt;div class=&#34;&#34;&gt;dymaic text ,, very long&lt;/div&gt; &lt;/td&gt; &lt;td&gt;two ways&lt;/td&gt; &lt;td&gt;sweater, jumper,worm , jumper,worm&lt;/td&gt; &lt;td class=&#34;text-right&#34;&gt; &lt;button&gt;&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;</code></pre> </div> </div> <p></p> <p><a href="https://jsfiddle.net/xbe9jdz8/" rel="nofollow noreferrer">JSFiddle 预览</a></p> </answer> </body></html>

以 ladscape 模式打印 html 表格

给出以下 html 代码： div.container > 表 { 边界崩溃：崩溃； } div.container > 表 > tbody > tr > td { 乙...</desc> <question vote="0"> <p>给出以下 html 代码：</p> <pre><code>&lt;html&gt; &lt;style&gt; div.container &gt; table { border-collapse: collapse; } div.container &gt; table &gt; tbody &gt; tr &gt; td { border: 1pt solid; } &lt;/style&gt; &lt;body&gt; &lt;div class=&#34;container&#34;&gt; &lt;p&gt;Hello&lt;/p&gt; &lt;table&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;td&gt;Lorem ipsum&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Hi&lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>我想通过以下方式打印到A4纵向：</p> <ol> <li>首页包含纵向“Hi”</li> <li>第二页包含表格，但旋转了 90 度。否则，第二页必须横向打印</li> <li>第三页包含纵向“Hello”</li> </ol> <p>我尝试添加以下样式：</p> <pre><code>@media print { @page { size: a4 portrait; } div.container &gt; table { break-before: page; break-after: page; transform: rotate(-90deg); } } </code></pre> <p>问题在于：</p> <ol> <li>表格未与页面左上角对齐</li> <li><strong>桌子在旋转之前以纵向模式调整大小</strong>。这意味着桌子的宽度仍然是纵向模式下的宽度</li> </ol> <p>我怎样才能实现我的目标？</p> <p>要求：</p> <ol> <li>HTML 代码必须保持原样。您不能将表格放在另一个 div 中或以任何方式修改它</li> <li>仅 CSS，如果不可能，则纯 Javascript</li> </ol> <p><a href="https://stackoverflow.com/questions/14037737/print-html-table-in-landscape">相关问题</a>不好，因为（1）第一个解决方案以横向模式打印所有内容，而不仅仅是表格（2）第二个解决方案与我提出的解决方案具有相同的问题。</p> </question> <answer tick="false" vote="0"> <p>考虑创建新页面并使用一些转换代码，您可以做到这一点。你能试试这个CSS吗：</p> <pre><code>&lt;style&gt; @media print { body { margin: 0; } div.container { page-break-before: always; page-break-after: always; } table { transform-origin: 0 0; transform: rotate(-90deg) translateX(-100%); } } </code></pre> <p>让我解释一下CSS：</p> <ul> <li>分页之前：总是；和分页之后：总是；到 div.container 以确保每个页面都以新容器开始。</li> <li>要消除默认边距，请将正文边距设置为 0</li> <li>使用transform-origin将旋转原点设置为表格的左上角。transform:rotate(-90deg)translateX(-100%);将表格逆时针旋转 90 度并向左移动以与页面左上角对齐。</li> </ul> <p>可在打印机界面设置页面尺寸。</p> </answer> </body></html>

HTML 表格比例适合

我有一个 KPI 仪表板，其中有很多小图表。一种类型的图表实际上是 HTML 表格。它显示在 DIV 中。 我有一个 KPI 仪表板，其中有很多小图表。一种类型的图表实际上是 HTML 表格。它显示在 DIV 中。 <div style="width:400px; height:250px;overflow:hidden"> <table> <tr><th>Col1</th><th>Col2</th></tr> <tr><td>Row1</td><td>Row2</td></tr> </table> <div> 目前，我隐藏了溢出。我想让表格“适合”div。 如果 table 变得太大而无法显示，我该如何使其适合/缩小到 DIV？理想情况下，文本也会缩小。 此 CSS 将使您的表格与您正在使用的容器具有相同的高度/宽度。添加边框/背景只是为了可视化发生的情况。 然而，缩小文本将更具挑战性。如果不使用 javascript 可能就没有办法实现这一点。即使您这样做了，内容也可能会因为字体太小而无法阅读。 我设法想出了一些 javascript/jquery 代码来更改字体大小，直到表格适合 div 或字体大小达到 5px（= 不可读）。粗略地说，您需要自己编辑其中一些内容（因为如果您不将选择器更改为 id，它将应用于所有表） [JSFiddle] table{ width: 100%; background-color: red; } th, td{ width: 50%; border: blue solid 1px; } Jquery/Javascript $(document).ready(function () { var HeightDiv = $("div").height(); var HeightTable = $("table").height(); if (HeightTable > HeightDiv) { var FontSizeTable = parseInt($("table").css("font-size"), 10); while (HeightTable > HeightDiv && FontSizeTable > 5) { FontSizeTable--; $("table").css("font-size", FontSizeTable); HeightTable = $("table").height(); } } }); 这是我目前使用的，它嵌入到项目中（例如，参见类），但请随意使用它作为灵感。 scaleTable = function (markupId) { //This hacky stuff is used because the table is invisible in IE. function realWidth(obj){ var clone = obj.clone(); clone.css("visibility","hidden"); $('body').append(clone); var width = clone.outerWidth(); clone.remove(); return width; } function realHeight(obj){ var clone = obj.clone(); clone.css("visibility","hidden"); $('body').append(clone); var height = clone.outerHeight(); clone.remove(); return height; } var table = $("#"+markupId+" table:first-of-type"); var tablecontainer = $("#"+markupId).parents( ".scalabletablecontainer" ); var scalex = tablecontainer.innerWidth() / realWidth(table); var scaley = tablecontainer.innerHeight() / realHeight(table); var scale = Math.min(scalex, scaley); if (scale<1.0) { var fontsize = 12.0 * scale; var padding = 5.0 * scale; $("#"+markupId+" table tbody").css("font-size", fontsize + "px"); $("#"+markupId+" table tbody TD").css("padding",padding + "px"); $("#"+markupId+" table TH").css("padding",padding + "px"); } }; 获取表格和 div 尺寸，如前面的评论所示。然后应用CSS： transform:scale(factorX, factorY) 到桌子上。

如何修复我的网页抓取代码中无法在不匹配的列中设置行错误？

从 bs4 导入 BeautifulSoup 导入请求 #importing beautifulsoup 和请求 url = 'https://en.wikipedia.org/wiki/List_of_largest_companies_by_revenue' 页面 = requests.get(url) 汤=

如何在多个rowSpan中分配分层数据

我对多个 rowSpan 中的分层数据有疑问。我想我可以制作下面这种桌框。但当分层的多重数据进来时，就很难对数据进行细化。我只能

如何将 CSS 伪元素放置在表格行的左侧

我试图在某些具有特定类的 tr 元素的第一个 td 元素上创建一个伪元素。表本身包含在可滚动容器内。 我想要实现的是...

如何解析固定形状的html表格？

我收到一个始终具有相同形状的 html 表格。只是每次的值不同。 html = ''' ... 我收到一个始终具有相同形状的 html 表格。只是每次的数值不同。 html = ''' <table align="center"> <tr> <th>Name</th> <td>NAME A</td> <th>Status</th> <td class="IN PROGRESS">IN PROGRESS</td> </tr> <tr> <th>Category</th> <td COLSPAN="3">CATEGORY A</td> </tr> <tr> <th>Creation date</th> <td>13/01/23 23:00</td> <th>End date</th> <td></td> </tr> </table> ''' 我需要将其转换为数据框，但 pandas 给了我一个奇怪的格式： print(pd.read_html(html)[0]) 0 1 2 3 0 Name NAME A Status IN PROGRESS 1 Category CATEGORY A CATEGORY A CATEGORY A 2 Creation date 13/01/23 23:00 End date NaN 我觉得我们需要使用 beautifulsoup 但我不知道如何: from bs4 import BeautifulSoup soup = BeautifulSoup(html, 'lxml') 你们能帮我吗？ 我的预期输出是这个数据框： Name Category Status Creation date End date 0 NAME A CATEGORY A RUNNING 27/07/2023 11:43 NaN 您可以迭代 <td>´s 并将它们与它一起存储在 dict: {e.find_previous_sibling('th').text:e.text for e in soup.select('table td')} 示例 from bs4 import BeautifulSoup import pandas as pd html = ''' <table align="center"> <tr> <th>Name</th> <td>NAME A</td> <th>Status</th> <td class="IN PROGRESS">IN PROGRESS</td> </tr> <tr> <th>Category</th> <td COLSPAN="3">CATEGORY A</td> </tr> <tr> <th>Creation date</th> <td>13/01/23 23:00</td> <th>End date</th> <td></td> </tr> </table> ''' data = [] soup = BeautifulSoup(html) pd.DataFrame( [ {e.find_previous_sibling('th').text:e.text for e in soup.select('table td')} ] ) 姓名

表格 HTML - 将 2 行转换为半高 1 标准行

我正在尝试复制中间的列和行，其高度为标准行高的 50%，如下图所示： 屏幕截图 html 表格示例 我正在尝试嵌套......

单击单个表格行时如何显示 React 组件

我正在 React 创建一个具有多行的表。对于每一行，下面都有一个名为 AutoShopPricesExpanded 的 React 组件，其中包含有关该行价格的更多详细信息。当我...

如何使添加到表中的新行位于具有 z-index 的其他元素之上

我有一个表格，每次按“提交”按钮时都会向其中添加行。 我的目标：我希望添加到表格中的行位于表单元素的顶部并覆盖它。 问题：怎么了...

Angular - 数据未显示在表和源映射错误中

我正在开发 Angular 应用程序，并面临在表格中显示数据的问题。在我的组件的 ngOnInit 中，我从服务获取数据并将其分配给 rows 变量。调试日志

为什么将表格放入带有align-items: center的弹性容器中会导致溢出时滚动混乱？

我正在尝试通过让表格在 x 轴上可滚动来创建响应式表格。下面的代码可以按我想要的方式工作。但是，如果我添加align-items: center;到身体的造型、桌子......

更改表格背景和文本颜色

我正在使用在网上找到的代码示例来帮助我在项目中设置表格。我想知道如何更改白色行的背景颜色？我希望他们是一样的......

带有垂直行的 HTML 表格

如何在 HTML 中制作垂直表格？垂直，我的意思是行将垂直，表标题位于左侧。 我还需要它的方式，以便我可以访问这些行（在本例中是垂直的），就像在