由于它与HTML有关，因此表格用于以表格方式显示数据。关于HTML表的问题应该通过显示有问题的源代码来询问，或者，如果问题是关于根据需求创建表失败的尝试，提问者需要显示失败的尝试，描述期望和行为如何不同。
我有一个包含一些列的表格，并且有一个可以单击和下载的“文档”列。 我怎样才能只将文档名称设为链接？ 超文本标记语言 我有一个包含一些列的表格，还有一个可以单击和下载的“文档”列。 我怎样才能只将文档名称设为链接？ HTML <p-table #dt3 [columns]="colsPermessi" [value]="permessi" [paginator]="true" [scrollable]="false" [rows]="10" [autoLayout]="true"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns" pResizableColumn>{{col.header}} </th> <th>Azioni</th> <th>Permessi</th> </tr> </ng-template> <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr [pSelectableRow]="rowData"> <td *ngFor="let col of colsPermessi"> {{rowData[col.field]}} </td> </tr> </ng-template> 因此，我希望“文档”列可单击，单击时它会调用“downloadFile ()”函数。 我该怎么做？ 这可以使用 *ngIf 来分隔你的案例来完成。对于 documento 列，使用 ngIf 插入超链接标记。对于其他所有内容，只需插入文本即可。请参阅下面的示例： <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr [pSelectableRow]="rowData"> <td *ngFor="let col of colsPermessi"> <span *ngIf="col.header == 'Documento'><a [href]="col.url">{{rowData[col.field]}}</a></span> <span *ngIf="col.header != 'Documento'>{{rowData[col.field]}}</span> </td> </tr> </ng-template> 我可以看到/a标记，但我看不到标记
我有一张像这样的有角材料的桌子 有人可以告诉我为什么“每页项目”数字显示在表格下方而不是选择选项元素（橙色标记）下方？ 这是我的 html 项目...
我有一个包含多行和多列的 HTML 表格。我想将 td 附加到其中一些行，以便 td 看起来像一个新行并跨越表格的整个宽度。这很有用...
我有一个 table 元素，里面有 tbody 和几个 tr 元素。 默认情况下，使用 display:none 隐藏 tr 元素（行）之一，自 sp...
使用 Tailwind CSS，我的项目中有这个表。 使用 Tailwind CSS，我的项目中有这个表。<div class="relative overflow-x-auto shadow-md sm:rounded-lg"> <table class="w-full text-sm text-left rtl:text-right text-gray-500"> <thead class="text-xs text-white uppercase bg-gray-900"> <tr> <th class="px-6 py-3">Name</th> <th class="px-6 py-3">Actions</th> </tr> </thead> <tbody> <tr class="bg-gray-50 border-b"> <td class="px-6 py-3 text-sm font-medium text-gray-900">John Doe</td> <td class="px-6 py-3"> <div onclick="openTableDropdown(1)" class="relative cursor-pointer inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 hover:text-gray-500"> clickable icone <div id="tableDropdown-1" class="hidden bg-white rounded-lg shadow-sm border border-gray-200 absolute bottom-0 left-1/2 transform translate-y-full -translate-x-1/2 z-10"> <ul> <li class="px-6 pt-2 pb-1 hover:bg-gray-200 rounded-t-lg">Action 1</li> <li class="px-6 py-1 hover:bg-gray-200">Action 2</li> <li class="px-6 pt-1 pb-2 hover:bg-gray-200 rounded-b-lg">Action 3</li> </ul> </div> </div> </td> </tr> </tbody> </table> </div> 我有这个简单的功能来切换下拉菜单：function openTableDropdown(id){ var dropdown = document.getElementById(`tableDropdown-${id}`); dropdown.classList.toggle('hidden'); } 一切正常，除了当我打开表格最后一行的下拉菜单时。要显示元素，div 在表格中显示垂直滚动。有什么办法可以显示表格上方的绝对元素吗？这就是现在的输出方式，但我想重叠表格上的元素并避免垂直滚动。我尝试更改 z-index 但不起作用。 您需要对代码进行一些更改。 看下面的代码： <div class="relative overflow-x-auto shadow-md sm:rounded-lg"> <table class="w-full text-sm text-left rtl:text-right text-gray-500"> <thead class="text-xs text-white uppercase bg-gray-900"> <tr> <th class="px-6 py-3">Name</th> <th class="px-6 py-3">Actions</th> </tr> </thead> <tbody> <tr class="bg-gray-50 border-b"> <td class="px-6 py-3 text-sm font-medium text-gray-900">John Doe</td> <td class="px-6 py-3"> <div onclick="openTableDropdown(1)" class="relative cursor-pointer inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 hover:text-gray-500"> clickable icone <div id="tableDropdown-1" class="hidden bg-white rounded-lg shadow-sm border border-gray-200 absolute top-full left-1/2 transform -translate-x-1/2 z-10"> <ul> <li class="px-6 pt-2 pb-1 hover:bg-gray-200 rounded-t-lg">Action 1</li> <li class="px-6 py-1 hover:bg-gray-200">Action 2</li> <li class="px-6 pt-1 pb-2 hover:bg-gray-200 rounded-b-lg">Action 3</li> </ul> </div> </div> </td> </tr> </tbody> </table> </div> 尝试一下，让我知道效果如何。谢谢你。
使用正确的代码拉动 td/html 元素 - Selenium 和 Python
我一直在尝试从 https://www.tradingview.com/markets/stocks-turkey/market-movers- 中提取股票代码（股票的简称）、股票名称、价格、板块和市值列全股票/
Python代码只能检索标题，但之后无法获取任何信息..我做错了什么？
html 代码图片 --> (https://i.stack.imgur.com/JkjSy.png) 从 bs4 导入 BeautifulSoup 导入请求 从 csv 导入 writer 汤 = BeautifulSoup(requests.get('https://www.cfpc.ca/en/members-
如何使用 css 在 <table> 中制作一列具有固定宽度，另一列具有自动宽度？
我正在制作一个具有可调整大小的列的表格，并面临一个无法解决的问题。我需要允许用户拖动列的一侧来调整其大小，并根据需要重置宽度。通过调整大小我...
我陷入了一个奇怪的点...... // TicketList 引用一个 html 表 id console.log("ticketList.rows.length 之前：" + TicketList.rows.length); 对于 (i= 1; i < ticketList.rows.le...
小输入元素在手机上的 td 元素内不可见。 HTML CSS
我有一个数独项目，其中有一个 9x9 数字表 元素，我在某些 处生成输入，这使得它 ...
如何展开和折叠表行（所有行，而不是每一行），同时最新行在纯 js 中始终保持可见？
我有一个输入字段，用于输入数据。 该数据将进入表并创建一个新行，其中包含数据。 最新的行始终位于顶部。 我希望表格仅显示最新行...
我浏览了 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%; }
我有这个标记： 桌子 { 边框：1px纯黑； 宽度：400px； 高度：300px； 边框折叠：折叠； } 表体 { </desc> <question vote="26"> <p>我有这个标记：</p> <pre><code><style> 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; } </style> <table> <tbody> <tr><td>test</td></tr> <tr><td>test</td></tr> </tbody> </table> </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="line-height:0"</code></pre> 添加到每个单元格即可。这在 IE 中有效，因为它将现有和不存在文本的行高设置为大约 19px，并强制单元格在大多数版本的 IE 中垂直扩展。无论是否有文本，IE 都需要执行此操作才能正确显示高度小于 20 像素的行。 </p> </answer> <answer tick="false" vote="8"> <p>如果您需要的话，您也可以尝试这个：</p> <pre><code><style type="text/css"> .... table td div {height:20px;overflow-y:hidden;} table td.col1 div {width:100px;} table td.col2 div {width:300px;} </style> <table> <tbody> <tr><td class="col1"><div>test</div></td></tr> <tr><td class="col2"><div>test</div></td></tr> </tbody> </table> </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><table> <tbody> <tr><td>test</td></tr> <tr><td>test</td></tr> <tr class="tr0"><td></td></tr> </tbody> </table></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>此方法非常适合具有固定高度的行，并阻止表格布局移动。 您必须添加一个 <pre><code><tr class="auto-height"></tr></code></pre> 来填充表格的其余部分，这样您的行就不必扩展并且可以保存其固定高度。</p> <pre><code><table> <tr class="fixed-height" > foo1 </tr> <tr class="fixed-height" > foo2 </tr> <tr class="fixed-height" > foo3 </tr> <tr class="auto-height" > // responsible for filling up the table </tr> </table> </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 部分）： 首先，请允许我与您分享滚动功能的工作原理。这是
在我目前正在处理的页面上，我似乎无法将第一行中有图像且下方有两列文本的表格居中（这两列不应该更多）比图像的...
测试 长长的绳子哈哈哈哈哈哈 TD { 最大宽度：67%； } </style&...</desc> <question vote="131"> <pre><code><table> <tr> <td>Test</td> <td>A long string blah blah blah</td> </tr> </table> <style> td { max-width: 67%; } </style> </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><div id="tablediv"> <table width="100%" border="1"> <tr> <td class="tdleft">Test</td> <td>A long string blah blah blah</td> </tr> </table> </div></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><table> <tr> <td>Testasdas 3123 1 dasd as da</td> <td>A long string blah blah blah</td> </tr> </table> </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> <table> <tbody> <tr> <td > <div class="">dymaic cell</div> </td> <td>one way</td> <td>sweater, jumper,worm</td> <td class="text-right"> <button></button> </td> </tr> <tr> <td > <div class="">dymaic text</div> </td> <td>one way</td> <td>sweater, jumper,worm</td> <td class="text-right"> <button></button> </td> </tr> <tr> <td > <div class="">dymaic text ,, very long</div> </td> <td>two ways</td> <td>sweater, jumper,worm , jumper,worm</td> <td class="text-right"> <button></button> </td> </tr> </tbody> </table></code></pre> </div> </div> <p></p> <p><a href="https://jsfiddle.net/xbe9jdz8/" rel="nofollow noreferrer">JSFiddle 预览</a></p> </answer> </body></html>
给出以下 html 代码： div.container > 表 { 边界崩溃：崩溃； } div.container > 表 > tbody > tr > td { 乙...</desc> <question vote="0"> <p>给出以下 html 代码：</p> <pre><code><html> <style> div.container > table { border-collapse: collapse; } div.container > table > tbody > tr > td { border: 1pt solid; } </style> <body> <div class="container"> <p>Hello</p> <table> <tbody> <tr> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> </tr> </tbody> </table> <p>Hi</p> </div> </body> </html> </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 > 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><style> @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>
我有一个 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 中的分层数据有疑问。我想我可以制作下面这种桌框。但当分层的多重数据进来时，就很难对数据进行细化。我只能