html-table 相关问题

HTML 表格规则直到边框大小

我有以下html代码， div { 边框：2px 纯红色； 高度：50vh； 宽度：50vw； } 桌子 { 边框：1px实线； 表格布局：固定； } <... 我有以下 html 代码， div { border: 2px solid red; height: 50vh; width: 50vw; } table { border: 1px solid; table-layout: fixed; } <div> <table rules="cols"> <tr> <th>Name</th> <th>Age</th> <th>Address</th> <th>Phone No</th> </tr> <tr> <td>Antony</td> <td>20</td> <td>USA</td> <td>12345</td> </tr> <tr> <td>Das</td> <td>20</td> <td>UK</td> <td>12345</td> </tr> <tr> <td>Michel</td> <td>20</td> <td>USA</td> <td>12345</td> </tr> </table> </div> 代码的结果是， 我期望得到的结果是， 我需要规则直到边界结束。 当我尝试调整表格的高度时，它会随着内容一起调整大小， 我只想调整列规则的大小，任何建议将不胜感激 我相信这就是你的答案 table { border-right: 1px solid; table-layout: fixed; }

为什么我尝试 rvest webscrape 失败（UseMethod 中的错误）？

我曾多次尝试从我在其他用例中成功抓取的网站上抓取页面，但都失败了。在这种特殊情况下，除了错误之外，我似乎无法产生任何结果： “错误

如何在表格底部添加标题？

我有一个表格，其标题出现在表格顶部。 我需要另一个标题出现在表格底部。怎么可能呢？ 我的... 我有一个表格，其标题出现在表格顶部。 我需要在表格底部显示另一个标题。怎么可能？ <table> <caption>My Table - Start</caption> <tbody></tbody> <tfooter></tfooter> <caption>My Table - End</caption> </table> 您应该将 放在表格顶部， 标签的正下方。然后你就可以使用CSS了：标题{ 标题侧：底部； }将其放在桌子下方。正如前人所写，每个表只有一个标题。如果您需要表格标题，请使用 或将标题放在表格外部并使用 CSS 正确定位。 您可以通过执行以下操作并应用一些 CSS 来模拟一个 <table> <caption class="cap">some caption text</caption> <tr> <td>cell 1</td><td>cell 2</td><td>cell3</td> </tr> <tr> <td>cell 1</td><td>cell 2</td><td>cell3</td> </tr> <tr> <td>cell 1</td><td>cell 2</td><td>cell3</td> </tr> <tr> <td colspan="3" class="cap foot"> This is pretty much a footer caption. </td> </tr> </table> 这是一个例子 我相信每个表格只能有 1 个标题，并且它必须出现在表格标签之后。 您可以在表格后面添加一个 div 并将标题放在那里。 我知道这是一个非常古老的线程，但考虑到通过此 CSS 可以轻松支持底部标题，我还没有看到一个好的答案... caption {caption-side:bottom;}

如何将URL/超链接数据从Google表格提取到Google脚本

我是谷歌脚本的新手...... 我在谷歌工作表中有一个阅读列表，我正在尝试使用谷歌脚本从工作表中提取数据以表格格式显示。桌子上的大部分都是

如何删除表格溢出产生的空间

每当我尝试让我的表格通过溢出和显示块CSS滚动时。桌子宽度总是缩小并留下空白空间。为什么会发生这种情况？我在这里做错了什么。我的ta...

表格 tr 的问题：悬停边框更改

在 Firefox 91.0.2（64 位）Windows 7 中测试。 任务：对于表 tr:hover，以不同的颜色显示 border-top 和 border-bottom，以便在视觉上突出显示该行。 问题：对于 tr:h...

如何更改表格/td 中文本的位置？尽可能使用 CSS

想要预览 客户想要将桌子设计成上面这样。 但我似乎无法弄清楚如何改变第一行中文本的位置，或者更好地说，因为......

如何更改表格/td 中文本的位置？

想要预览 客户想要将桌子设计成上面这样。 但我似乎无法弄清楚如何改变第一行中文本的位置，或者更好地说，因为......

使垂直桌子易于使用

我有一些非常基本的数据，如下所示： { “姓名”：“约翰·多伊”， “城市”：“明尼阿波利斯”， “州”：“明尼苏达州”， “国家”：&...

如何同时从两个表中删除行 - JQuery

当我单击添加按钮时，我将根据我的条件并行添加两行，并且正在添加两行，同时如果我删除与第二个选项卡的索引值相关的第一个表行...

为什么这个类似 html 表格的结构在离开视口时不会垂直滚动，并带有粘性标题和粘性第一列？

在我将真实数据放入其中并将其重构为React组件之前，我试图弄清楚如何为类似表格的结构构建这个基本模板（我知道它不是一个实际的表格）。我有...

在click JS 上将文本拆分为单独的单元格

我有来自用户的文本输入，需要在单击时拆分为表格单元格。 例如。对于表格单元格中的句子“五个拳击奇才跳得很快”，我可以单击“bo...

如何确保我的用户对象列表遵循反应表的列列表

大家好，我想和你们谈谈我正在尝试做的事情。简而言之，我使用 React 创建了一个 HTML 表格，将 Table.js 分为两个组件，例如： StaffColumns.js 斯塔...

HTML 中表格单元格的宽度不增加

我在 HTML 中创建了这个表格并添加了 CSS 以使其看起来更好，我还成功地将其居中于页面，现在唯一缺少的是更宽的 tfoot，但我无法做到正确。 ...

如何在CSS中设置col的特定单元格的样式

我有一个包含 5 个顶级列的表格，每个顶级列跨越 4 个列。 我想对每个顶级列的最后一个子列应用不同的样式。 那应该怎么做呢。 我有一个包含 5 个顶级列的表格，每个顶级列跨越 4 个列。 我想对每个顶级列的最后一个子列应用不同的样式。 应该怎么做。 <table> <thead> <tr> <th colspan='3'> First </th> <th colspan='2'> Second </th> <th> Third </th> <th> Fourth </th> <th> Fifth </th> </tr> </thead> <tbody> <colgroup> <col span=3> <col span=2> <col> <col> <col> </colgroup> <tr> #First col <td> data </td> <td> data </td> <td> data </td> #this one #Second col <td> data </td> <td> data </td> #this one #Remain cols <td> data </td> <td> data </td> <td> data </td> </tr> </tobdy> </table> 我希望每个col具有相同的背景，但我也希望每个列的最后一个元素的背景不同。因此，每个列的最后一个元素应该有绿色背景。 尝试提出一个有效的选择器来设置所需列的样式 如果我正确理解你的问题，你正在寻找的选择器是td:nth-child(3), td:nth-child(5) - 请参阅下面的代码片段。如果没有，请提供您正在寻找的内容的更好描述。 th, td { border: 1px solid #ddd; background: #ddd; } td:nth-child(3), td:nth-child(5) { background: #fc9; } <table> <thead> <tr> <th colspan='3'> First </th> <th colspan='2'> Second </th> <th> Third </th> <th> Fourth </th> <th> Fifth </th> </tr> </thead> <tbody> <colgroup> <col span=3> <col span=2> <col> <col> <col> </colgroup> <tr> <td> data </td> <td> data </td> <td> data #this one</td> <td> data </td> <td> data #this one</td> <td> data </td> <td> data </td> <td> data </td> </tr> </tbody> </table>

HTML，一个表格单元格中有两种字体大小

ID站名基准面 (mAOD) 最新级别 <tr> <th>ID</th><th>Station Name</th><th>Datum<br> <span style='font-size:3px'>(mAOD)</span> </th><th>Latest Level<br> <font size="1">(% of normal range)</font> </th><th>Recorded at</th><th></th> </tr> 在上面的行中，span 和 font 标签对文本大小没有影响。 以下是完整页面供参考： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>River Levels</title> <style> body { background-color: #000000; COLOR: #ffff00; font: normal 15px Verdana, Arial, sans-serif; } a:link, a:visited { color: #00ff00; } a:hover { color: #009900; text-decoration: underline; } h1 { color: #ffff00; } p { color: #ffff00; margin-right: 15%; margin-left: 15%; border: 1px solid red; padding: 30px; } table, th, td { border: 1px solid red; border-collapse: collapse; text-align: center; padding: 15px; } </style> </head> <body> <center> <img alt="Nene (76K)" src="RiverLevels2.png" /><br>&nbsp;<br /> <table> <tr> <th>ID</th> <th>Station Name</th> <th>Datum<br> <span style='font-size:3px'>(mAOD)</span> </th> <th>Latest Level<br> <font size="1">(% of normal range)</font> </th> <th>Recorded at</th> <th></th> </tr> <tr> <td>6286</td> <td>Orton Sluice</td> <td>2</td> <td>15</td> <td>01:45 Wed 31</td> <td bgcolor="#7f00ff">&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>6107</td> <td>Wansford</td> <td>8.03</td> <td>11</td> <td>01:45 Wed 31</td> <td bgcolor="#593bfd">&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>6111</td> <td>Lilford</td> <td>21.8</td> <td>17</td> <td>20:45 Tue 30</td> <td bgcolor="#03b0ec">&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>6104</td> <td>Harrowden</td> <td>45.4</td> <td>18</td> <td>06:00 Tue 30</td> <td bgcolor="#92fda9">&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>9396</td> <td>Brigstock</td> <td>52.05</td> <td>9</td> <td>01:45 Wed 31</td> <td bgcolor="#bced8f">&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>6108</td> <td>South Bridge</td> <td>56.0</td> <td>0</td> <td>01:45 Wed 31</td> <td bgcolor="#d4dc7f">&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>6103</td> <td>Wootton Park</td> <td>62.0</td> <td>10</td> <td>06:00 Tue 30</td> <td bgcolor="#fab964">&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>6120</td> <td>Kislingbury</td> <td>63.84</td> <td>12</td> <td>01:45 Wed 31</td> <td bgcolor="#ffab5c">&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>6101</td> <td>Dodford</td> <td>79.2</td> <td>14</td> <td>18:00 Tue 30</td> <td bgcolor="#ff2512">&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>6218</td> <td>Brixworth</td> <td>82.5</td> <td>9</td> <td>06:30 Tue 30</td> <td bgcolor="#ff0301">&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> </table><br /> </center> <p> Levels are scaled so that the normal range fits between the 2 green lines. Levels higher than 100% indicate that flooding is possible. Levels below zero may indicate a malfunctioning lock or sluice. <br />&nbsp;<br /> Line colours are derived from the site datum, blue is for sites close to sea level and red is higher up the river, lines with the same colour are from sites at the same level. <br />&nbsp;<br /> Data from here: <a href="https://flood-warning-information.service.gov.uk/river-and-sea-levels"> https://flood-warning-information.service.gov.uk/river-and-sea-levels</a>. Data is updated by the Environment Agency daily, more often in times of flood. <br />&nbsp;<br /> Contains public sector information licensed under the <a href="http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">Open Government Licence v3.0.</a> </p> <center> <table> <tr> <th>Station Name</th> <th>Rainfall<br> <font size="-3"> (24 hours)</font> </th> <th>Recorded</th> </tr> <tr> <tr> <td>Dog In A Doublet </td> <td>0.0mm</td> <td>4:45am on 28 January</td> </tr> <tr> <td>Chesterton </td> <td>0.0mm</td> <td>5:15am on 28 January</td> </tr> <tr> <td>Metoff Wittering </td> <td>0.0mm</td> <td>5:00am on 28 January</td> </tr> <tr> <td>Kings Cliffe </td> <td>0.0mm</td> <td>6:30am on 27 January</td> </tr> <tr> <td>Oundle </td> <td>0.0mm</td> <td>4:30am on 28 January</td> </tr> <tr> <td>Brigstock </td> <td>0.2mm</td> <td>4:30am on 28 January</td> </tr> <tr> <td>Wellingborough </td> <td>0.8mm</td> <td>4:30am on 28 January</td> </tr> <tr> <td>Yardley Hastings </td> <td>0.0mm</td> <td>6:30am on 27 January</td> </tr> <tr> <td>Quinton </td> <td>0.0mm</td> <td>5:15am on 28 January</td> </tr> <tr> <td>Pitsford </td> <td>0.0mm</td> <td>5:45am on 28 January</td> </tr> <tr> <td>Dodford </td> <td>0.0mm</td> <td>6:30am on 27 January</td> </tr> </table> </center> <p>Rainfall data updated at 06:10GMT, Sun 28 January <br> <a href="https://environment.data.gov.uk/catchment-planning/ManagementCatchment/3059"> <br> Nene catchment map</a> </p> </body> </html> 我希望标记的文本更小。 我也尝试过“小”并定义一个div。 它似乎工作正常，假设您的问题是您希望表标题行“最新级别（正常范围的％）”中的文本具有不同的大小，其中文本“最新级别”比中的文本大括号。 您的代码对我有用，两个标签都有小字体，但我添加了两个类并为您创建了一个片段。 .small和.smaller，我希望我正确理解你的问题 body { background-color: #000000; COLOR: #ffff00; font: normal 15px Verdana, Arial, sans-serif; } a:link,a:visited { color: #00ff00; } a:hover { color: #009900; text-decoration: underline; } h1 {color: #ffff00;} p {color: #ffff00; margin-right: 15%; margin-left: 15%; border: 1px solid red; padding: 30px; } table, th, td { border: 1px solid red; border-collapse: collapse; text-align: center; padding: 15px; } .small{ font-size:8px; } .smaller{ font-size:4px } <table> <tr> <th>ID</th> <th>Station Name</th> <th>Datum<br> <span class="smaller">(mAOD)</span> </th> <th>Latest Level<br> <font class="small">(% of normal range)</font> </th> <th>Recorded at</th> <th></th> </tr> <tr> <td>6286</td> <td>Orton Sluice</td> <td>2</td> <td>15</td> <td>01:45 Wed 31</td> <td bgcolor="#7f00ff">&nbsp;&nbsp;&nbsp;&nbsp;</td></tr> </table>

最后一个<tr>不在单独的行上。它与我使用 colspan 和 rowspan 的倒数第二行平行出现

我有一个表，其中第一列跨越 8 行，而其他列与之平行。倒数第二行应与其平行，同时跨越 3 行和 3 列。最后一行应该在单独的r上...

CSS Safari：目标表tr（偶数和奇数）忽略td和th以添加背景线性渐变

我想为 PostList 页面定义一种新的 WordPress 管理风格。 我不知道CSS 3是否有一个属性允许使用线性渐变的背景图像在整个CSS中显示&...

如何使用 docutils 创建 2 行表头

我为 Sphinx 编写了一个扩展，用于读取代码覆盖率文件并将其以表格形式呈现在 Sphinx 生成的 HTML 文档中。 目前该表有一个标题行，例如3 列

如何在具有边框折叠的表格中避免边框折叠：折叠？

我正在制作一个表格，我希望第一列和最后一列是粘性的。这部分我已经处理好了（我使容器可调整大小，这样您就可以让滚动条看到它。） 我的亲...