html-table 相关问题

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

如何随着行数的增加动态添加分页按钮到 HTML 表格的右下角？

我有一个 Flask 应用程序，我在其中根据数据库查询动态呈现表格。在我的一条路线中，我显示了一张医生表，可以删除单个条目。作为...

python html flask html-table render

回答 1 投票 0

gridjs：如何根据行ID更改背景颜色？

我想更改gridjs生成的表中行的背景颜色。我想出了下面这行代码来改变背景颜色的样式，但它必须是...

javascript html-table row background-color gridjs

回答 1 投票 0

无法将表格标题置于固定（粘性）位置

我有一个包含很多行的 HTML 表格，我试图使表格标题在滚动时具有粘性。但我无法让标头粘住或保持在固定位置。超文本标记语言我有一个包含很多行的 HTML 表格，我试图使表格标题在滚动时具有粘性。但是我无法让标头粘住或保持在固定位置。 HTML <section> <table> <thead> <tr> <th>A <th> <th>B <th> <th>C <th> <th>D <th> <th>E <th> <th>F <th> <th>G <th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> </tbody> </table> </section> CSS section { width: 100%; overflow-x: scroll; overflow-y: hidden; } table { width: 250%; } th { text-align: left; position: sticky; } thead { position: sticky; } 发生这种情况的原因有很多：位置粘性不适用于 <thead> 或 <tr>，仅适用于<th> 如果元素的任何父元素上的溢出设置为隐藏、滚动或自动，则位置粘性很可能不起作用。如果任何父元素设置了高度，位置粘性可能无法正常工作。如果表格 display 设置为 block 或 table 等属性之外的其他内容，位置粘性将不起作用许多浏览器仍然不支持粘性定位。查看哪些浏览器支持position：sticky。检查祖先元素是否设置了溢出（例如溢出：隐藏）；尝试切换它。您可能必须在 DOM 树上爬得比您预期的更高。这可能会影响你的位置：粘在后代元素上。简单的例子添加类和布局应该不难。 body { margin: 0; padding: 2rem; } table { text-align: left; position: relative; border-collapse: collapse; } th, td { padding: 0.25rem; } tr.red th { background: red; color: white; } tr.green th { background: green; color: white; } tr.purple th { background: purple; color: white; } th { background: white; position: sticky; top: 0; /* Don't forget this, required for the stickiness */ box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4); } <table> <thead> <tr class="red"> <th>Name</th> <th>Age</th> <th>Job</th> <th>Color</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td>Lorem.</td> <td>Ullam.</td> <td>Vel.</td> <td>At.</td> <td>Quis.</td> </tr> <tr> <td>Quas!</td> <td>Velit.</td> <td>Quisquam?</td> <td>Rerum?</td> <td>Iusto?</td> </tr> <tr> <td>Voluptates!</td> <td>Fugiat?</td> <td>Alias.</td> <td>Doloribus.</td> <td>Veritatis.</td> </tr> <tr> <td>Maiores.</td> <td>Ab.</td> <td>Accusantium.</td> <td>Ullam!</td> <td>Eveniet.</td> </tr> <tr> <td>Hic.</td> <td>Id!</td> <td>Officiis.</td> <td>Modi!</td> <td>Obcaecati.</td> </tr> <tr> <td>Soluta.</td> <td>Ad!</td> <td>Impedit.</td> <td>Alias!</td> <td>Ad.</td> </tr> <tr> <td>Expedita.</td> <td>Quo.</td> <td>Exercitationem!</td> <td>Optio?</td> <td>Ipsum?</td> </tr> <tr> <td>Commodi!</td> <td>Rem.</td> <td>Aspernatur.</td> <td>Accusantium!</td> <td>Maiores.</td> </tr> <tr> <td>Omnis.</td> <td>Cumque?</td> <td>Eveniet!</td> <td>Mollitia?</td> <td>Vero.</td> </tr> <tr> <td>Error!</td> <td>Inventore.</td> <td>Quasi!</td> <td>Ducimus.</td> <td>Repudiandae!</td> </tr> <tr> <td>Dolores!</td> <td>Necessitatibus.</td> <td>Corrupti!</td> <td>Eum.</td> <td>Sunt!</td> </tr> <tr> <td>Ea.</td> <td>Culpa?</td> <td>Quam?</td> <td>Nemo!</td> <td>Sit!</td> </tr> <tr> <td>Veritatis!</td> <td>Facilis.</td> <td>Expedita?</td> <td>Ipsam!</td> <td>Omnis!</td> </tr> <tr> <td>Vitae.</td> <td>Cumque.</td> <td>Repudiandae.</td> <td>Ut?</td> <td>Sed!</td> </tr> <tr> <td>Accusantium.</td> <td>Adipisci.</td> <td>Sit.</td> <td>Maxime.</td> <td>Harum.</td> </tr> <tr class="green"> <th>Name</th> <th>Age</th> <th>Job</th> <th>Color</th> <th>URL</th> </tr> <tr> <td>Qui!</td> <td>Accusamus?</td> <td>Minima?</td> <td>Dolorum.</td> <td>Molestiae.</td> </tr> <tr> <td>Vero!</td> <td>Voluptatum?</td> <td>Ea?</td> <td>Odit!</td> <td>A.</td> </tr> <tr> <td>Debitis.</td> <td>Veniam.</td> <td>Fuga.</td> <td>Alias!</td> <td>Recusandae!</td> </tr> <tr> <td>Aperiam!</td> <td>Dolorum.</td> <td>Enim.</td> <td>Sapiente!</td> <td>Suscipit?</td> </tr> <tr> <td>Consequuntur.</td> <td>Doloremque.</td> <td>Illum!</td> <td>Iste!</td> <td>Sint!</td> </tr> <tr> <td>Facilis.</td> <td>Error.</td> <td>Fugiat.</td> <td>At.</td> <td>Modi?</td> </tr> <tr> <td>Voluptatibus!</td> <td>Alias.</td> <td>Eaque.</td> <td>Cum.</td> <td>Ducimus!</td> </tr> <tr> <td>Nihil.</td> <td>Enim.</td> <td>Earum?</td> <td>Nobis?</td> <td>Eveniet.</td> </tr> <tr> <td>Eum!</td> <td>Id?</td> <td>Molestiae.</td> <td>Velit.</td> <td>Minima.</td> </tr> <tr> <td>Sapiente?</td> <td>Neque.</td> <td>Obcaecati!</td> <td>Earum.</td> <td>Esse.</td> </tr> <tr> <td>Nam?</td> <td>Ipsam!</td> <td>Provident.</td> <td>Ullam.</td> <td>Quae?</td> </tr> <tr> <td>Amet!</td> <td>In.</td> <td>Officia!</td> <td>Natus?</td> <td>Tempore?</td> </tr> <tr> <td>Consequatur.</td> <td>Hic.</td> <td>Officia.</td> <td>Itaque?</td> <td>Quasi.</td> </tr> <tr> <td>Enim.</td> <td>Tenetur.</td> <td>Asperiores?</td> <td>Eos!</td> <td>Libero.</td> </tr> <tr> <td>Exercitationem.</td> <td>Quidem!</td> <td>Beatae?</td> <td>Adipisci?</td> <td>Accusamus.</td> </tr> <tr> <td>Omnis.</td> <td>Accusamus?</td> <td>Eius!</td> <td>Recusandae!</td> <td>Dolor.</td> </tr> <tr> <td>Magni.</td> <td>Temporibus!</td> <td>Odio!</td> <td>Odit!</td> <td>Voluptatum?</td> </tr> <tr> <td>Eum.</td> <td>Animi!</td> <td>Labore.</td> <td>Alias!</td> <td>Fuga.</td> </tr> <tr> <td>Quia!</td> <td>Quis.</td> <td>Neque?</td> <td>Illo.</td> <td>Ad.</td> </tr> <tr> <td>Officiis.</td> <td>Exercitationem!</td> <td>Adipisci?</td> <td>Officiis?</td> <td>In?</td> </tr> <tr> <td>Voluptates?</td> <td>Voluptatum.</td> <td>Nihil.</td> <td>Totam?</td> <td>Quisquam!</td> </tr> <tr> <td>Soluta.</td> <td>Tempore!</td> <td>Cupiditate.</td> <td>Beatae.</td> <td>Perspiciatis.</td> </tr> <tr> <td>Porro.</td> <td>Officia?</td> <td>Error.</td> <td>Culpa?</td> <td>Fugit.</td> </tr> <tr> <td>Et?</td> <td>Nemo.</td> <td>Nisi?</td> <td>Totam!</td> <td>Voluptate.</td> </tr> <tr> <td>Saepe?</td> <td>Vero.</td> <td>Amet?</td> <td>Illo!</td> <td>Laborum!</td> </tr> <tr class="purple"> <th>Name</th> <th>Age</th> <th>Job</th> <th>Color</th> <th>URL</th> </tr> <tr> <td>Atque!</td> <td>Tenetur.</td> <td>Optio.</td> <td>Iure.</td> <td>Porro.</td> </tr> <tr> <td>Atque.</td> <td>Alias.</td> <td>Doloremque.</td> <td>Velit.</td> <td>Culpa.</td> </tr> <tr> <td>Placeat?</td> <td>Necessitatibus.</td> <td>Voluptate!</td> <td>Possimus.</td> <td>Nam?</td> </tr> <tr> <td>Illum!</td> <td>Quae.</td> <td>Expedita!</td> <td>Omnis.</td> <td>Nam.</td> </tr> <tr> <td>Consequuntur!</td> <td>Consectetur!</td> <td>Provident!</td> <td>Consequuntur!</td> <td>Distinctio.</td> </tr> <tr> <td>Aperiam!</td> <td>Voluptatem.</td> <td>Cupiditate!</td> <td>Quae.</td> <td>Praesentium.</td> </tr> <tr> <td>Possimus?</td> <td>Qui.</td> <td>Consequuntur.</td> <td>Deleniti.</td> <td>Voluptas.</td> </tr> <tr> <td>Hic?</td> <td>Ab.</td> <td>Asperiores?</td> <td>Omnis.</td> <td>Animi!</td> </tr> <tr> <td>Cupiditate.</td> <td>Velit.</td> <td>Libero.</td> <td>Iste.</td> <td>Dicta?</td> </tr> <tr> <td>Consequatur!</td> <td>Nobis.</td> <td>Aperiam!</td> <td>Odio.</td> <td>Nemo!</td> </tr> <tr> <td>Dolorem.</td> <td>Distinctio?</td> <td>Provident?</td> <td>Nisi!</td> <td>Impedit?</td> </tr> <tr> <td>Accusantium?</td> <td>Ea.</td> <td>Doloribus.</td> <td>Nobis.</td> <td>Maxime?</td> </tr> <tr> <td>Molestiae.</td> <td>Rem?</td> <td>Enim!</td> <td>Maxime?</td> <td>Reiciendis!</td> </tr> <tr> <td>Commodi.</td> <td>At.</td> <td>Earum?</td> <td>Fugit.</td> <td>Maxime?</td> </tr> <tr> <td>Eligendi?</td> <td>Quis.</td> <td>Error?</td> <td>Atque.</td> <td>Perferendis.</td> </tr> <tr> <td>Quidem.</td> <td>Odit!</td> <td>Tempore.</td> <td>Voluptates.</td> <td>Facere!</td> </tr> <tr> <td>Repudiandae!</td> <td>Accusamus?</td> <td>Soluta.</td> <td>Incidunt.</td> <td>Aliquid?</td> </tr> <tr> <td>Quisquam?</td> <td>Eius.</td> <td>Obcaecati?</td> <td>Maxime.</td> <td>Nihil.</td> </tr> <tr> <td>Minus.</td> <td>Magni?</td> <td>Necessitatibus?</td> <td>Asperiores.</td> <td>Iure.</td> </tr> <tr> <td>Ipsa!</td> <td>Temporibus.</td> <td>Non!</td> <td>Dolore.</td> <td>Veritatis.</td> </tr> <tr> <td>Ea!</td> <td>Officia?</td> <td>Doloribus?</td> <td>Deleniti?</td> <td>Dolorem!</td> </tr> <tr> <td>Sequi?</td> <td>Molestias!</td> <td>Nesciunt.</td> <td>Qui.</td> <td>Doloribus?</td> </tr> <tr> <td>Id.</td> <td>Enim?</td> <td>Quam!</td> <td>Sunt!</td> <td>Consequuntur.</td> </tr> <tr> <td>Reprehenderit?</td> <td>Ut?</td> <td>Veritatis!</td> <td>Corporis!</td> <td>Ipsa.</td> </tr> <tr> <td>Blanditiis!</td> <td>Veniam!</td> <td>Tenetur.</td> <td>Eos?</td> <td>Repellat!</td> </tr> <tr> <td>Enim?</td> <td>Atque!</td> <td>Aspernatur?</td> <td>Fugit.</td> <td>Voluptatibus!</td> </tr> <tr> <td>Nihil.</td> <td>Distinctio!</td> <td>Aut!</td> <td>Rerum!</td> <td>Dolorem?</td> </tr> <tr> <td>Inventore!</td> <td>Hic.</td> <td>Explicabo.</td> <td>Sit.</td> <td>A.</td> </tr> <tr> <td>Inventore.</td> <td>A.</td> <td>Nam.</td> <td>Beatae.</td> <td>Consequatur.</td> </tr> <tr> <td>Eligendi.</td> <td>Illum.</td> <td>Enim?</td> <td>Dignissimos!</td> <td>Ducimus?</td> </tr> <tr> <td>Eligendi!</td> <td>Fugiat?</td> <td>Deleniti!</td> <td>Rerum?</td> <td>Delectus?</td> </tr> <tr> <td>Sit.</td> <td>Nam.</td> <td>Eveniet?</td> <td>Veritatis.</td> <td>Adipisci!</td> </tr> <tr> <td>Nostrum?</td> <td>Totam?</td> <td>Voluptates!</td> <td>Ab!</td> <td>Consequatur.</td> </tr> <tr> <td>Error!</td> <td>Dicta?</td> <td>Voluptatum?</td> <td>Corporis!</td> <td>Ea.</td> </tr> <tr> <td>Vel.</td> <td>Asperiores.</td> <td>Facere.</td> <td>Quae.</td> <td>Fugiat.</td> </tr> <tr> <td>Libero?</td> <td>Molestias.</td> <td>Praesentium!</td> <td>Accusantium!</td> <td>Tenetur.</td> </tr> <tr> <td>Eveniet.</td> <td>Quam.</td> <td>Quibusdam.</td> <td>Eaque?</td> <td>Dolore!</td> </tr> <tr> <td>Asperiores.</td> <td>Impedit.</td> <td>Ullam?</td> <td>Quod.</td> <td>Placeat.</td> </tr> <tr> <td>In?</td> <td>Aliquid.</td> <td>Voluptatum!</td> <td>Omnis?</td> <td>Magni.</td> </tr> <tr> <td>Autem.</td> <td>Earum!</td> <td>Debitis!</td> <td>Eius.</td> <td>Incidunt.</td> </tr> <tr> <td>Blanditiis?</td> <td>Impedit.</td> <td>Libero?</td> <td>Reiciendis!</td> <td>Tempore.</td> </tr> <tr> <td>Quasi.</td> <td>Reiciendis.</td> <td>Aut?</td> <td>Architecto?</td> <td>Vero!</td> </tr> <tr> <td>Fuga!</td> <td>Illum!</td> <td>Tenetur!</td> <td>Vitae.</td> <td>Natus.</td> </tr> <tr> <td>Dolorem?</td> <td>Eaque!</td> <td>Vero?</td> <td>Quibusdam.</td> <td>Deleniti?</td> </tr> <tr> <td>Minus.</td> <td>Accusantium?</td> <td>Ab.</td> <td>Cupiditate.</td> <td>Atque?</td> </tr> <tr> <td>Hic.</td> <td>Eligendi.</td> <td>Sit?</td> <td>Nihil.</td> <td>Dolor.</td> </tr> <tr> <td>Quidem.</td> <td>In?</td> <td>Nesciunt?</td> <td>Adipisci.</td> <td>Neque.</td> </tr> <tr> <td>Eos.</td> <td>Incidunt!</td> <td>Quis?</td> <td>Quod?</td> <td>Vitae!</td> </tr> <tr> <td>Ullam!</td> <td>Facilis.</td> <td>Tempora!</td> <td>Accusantium.</td> <td>Consequuntur?</td> </tr> <tr> <td>Numquam?</td> <td>At.</td> <td>Incidunt.</td> <td>Tenetur?</td> <td>Voluptatem.</td> </tr> <tr> <td>Iusto?</td> <td>Inventore.</td> <td>Molestias.</td> <td>Accusantium.</td> <td>Sunt.</td> </tr> <tr> <td>Repellendus!</td> <td>Ex.</td> <td>Magnam.</td> <td>Odit!</td> <td>Iste?</td> </tr> <tr> <td>Id!</td> <td>Reiciendis?</td> <td>Rem.</td> <td>Quae!</td> <td>Laborum?</td> </tr> <tr> <td>Exercitationem?</td> <td>Maiores.</td> <td>Minima.</td> <td>Nemo!</td> <td>Sequi.</td> </tr> <tr> <td>Qui.</td> <td>Impedit?</td> <td>Reprehenderit.</td> <td>Distinctio.</td> <td>Natus?</td> </tr> <tr> <td>Suscipit!</td> <td>Tenetur.</td> <td>Cumque!</td> <td>Molestiae.</td> <td>Fugiat?</td> </tr> <tr> <td>Sunt?</td> <td>Quis?</td> <td>Officia.</td> <td>Incidunt.</td> <td>Voluptate.</td> </tr> <tr> <td>Possimus.</td> <td>Mollitia!</td> <td>Eveniet!</td> <td>Temporibus.</td> <td>Mollitia!</td> </tr> <tr> <td>Incidunt.</td> <td>Fugiat.</td> <td>Error.</td> <td>Odit.</td> <td>Cumque?</td> </tr> <tr> <td>Maxime?</td> <td>Qui!</td> <td>Sapiente!</td> <td>Natus.</td> <td>Soluta?</td> </tr> </tbody> </table> 您只能在 position="sticky" 元素上设置 th（而不是 thead） th { /* ... */ position: sticky; top: 0; /* Don't forget this, required for the stickiness */ } 从.table-section中删除溢出设置： .table-section { width: 100%; /*overflow-x: scroll;*/ /*overflow-y: hidden;*/ padding-bottom: 20px; }

css html-table sticky

回答 2 投票 0

无法让表头处于固定位置（粘性）

所以我有一个html表格，我试图使表格标题在滚动时具有粘性，因为会有很多行，但它不起作用。我无法让标头粘住或留在...

css angular html-table

回答 2 投票 0

Javascript 替换子节点，导致它们更改为 [object HTMLTableSectionElement]

我正在尝试以编程方式转换表格以删除一些我不想要的标签。我编写了一个递归函数，该函数在表元素上调用，并在所有子元素上调用自身，ma...

javascript html html-table

回答 1 投票 0

当鼠标悬停在表格单元格上时，我想向单元格添加边框以突出显示它。但是当我这样做时，所有其他单元格的宽度和高度都会受到影响

我有一个简单的介绍页面的以下 html 代码。在鼠标悬停（悬停）事件上，我将添加边框以突出显示单元格。但是当我使用现有的代码和 css 执行此操作时，所有单元格高度和 wi...

html css html-table hover border

回答 1 投票 0

如何在顺风的表格行之间添加空格？

我是顺风新手，尝试在表行之间添加空间。我是顺风新手，正在尝试在表格行之间添加空间。 <table className="table-auto w-full shadow-md mt-5 rounded"> <thead className="bg-base-200 text-left text-gray-700 tracking-wider"> <tr> <th className="p-4 ">Chapter Number</th> <th className="p-4 ">Chapter Name</th> <th className="p-4 ">Added at</th> <th className="p-4 ">Status</th> </tr> </thead> <tbody> {chapters.map((chapter) => ( <tr className="bg-card mt-6 rounded" key={chapter.chapterNumber}> <td className="p-4">{chapter.chapterNumber}</td> <td className="p-4">{chapter.chapterName}</td> <td className="p-4">{chapter.addedAt}</td> <td className="p-4">{!chapter.published && 'Not published'}</td> </tr> ))} </tbody> </table> 这不会增加表格行之间的空间。所以，我尝试在每一行上使用mt-6。没有效果。我见过类似的问题，并在这里使用了answer，并添加了border-spacing和border-seperate。所以，现在我的表行有这些类。<table className="table-auto w-full shadow-md mt-5 border-spacing-2 border-separate rounded"> 但这会导致所有元素周围增加空间。我不明白为什么表行会这样，并且不采用 margin 和 mt-6。但是如果我用 div 替换行，它会应用边距顶部。例如： <div> <th className="p-4 ">Chapter Number</th> <th className="p-4 ">Chapter Name</th> <th className="p-4 ">Added at</th> <th className="p-4 ">Status</th> </div> <div className="mt-6 bg-card"> <th className="p-4 ">1</th> <th className="p-4 ">Chapter Name</th> <th className="p-4 ">04/2/2022</th> <th className="p-4 ">Not published</th> </div> <div className="mt-6 bg-card"> <th className="p-4 ">1</th> <th className="p-4 ">Chapter Name</th> <th className="p-4 ">04/2/2022</th> <th className="p-4 ">Not published</th> </div> 首先，您需要使用 table 标签上的 Tailwind border-separate 属性分割边框，然后添加 border-spacing-y-3，其中：y 是轴，number 是行之间的高度。用于控制表格边框之间间距的实用程序。 Tailwind 文档 <script src="https://cdn.tailwindcss.com"></script> <table class="table-auto w-full shadow-md mt-5 rounded bg-black border-separate border-spacing-y-3"> <thead class="text-left text-gray-500 tracking-wider"> <tr> <th class="p-4">Chapter Number</th> <th class="p-4">Chapter Name</th> <th class="p-4">Added at</th> <th class="p-4">Status</th> </tr> </thead> <tbody class=""> <tr class="bg-card rounded text-gray-200 bg-neutral-900"> <td class="p-4">60001</td> <td class="p-4"></td> <td class="p-4">6/21/2022</td> <td class="p-4">Not published</td> </tr> <tr class="bg-card rounded text-gray-200 bg-neutral-900"> <td class="p-4">60001</td> <td class="p-4"></td> <td class="p-4">6/21/2022</td> <td class="p-4">Not published</td> </tr> </tbody> </table> 使用 border-seperate 和 border-spacing-y-4 仅添加垂直放大倍数。 <script src="https://cdn.tailwindcss.com"></script> <div class="bg-black"> <table class="table-auto w-full shadow-md rounded border-separate border-spacing-y-4"> <thead class="text-white text-left bg-gray-900 tracking-wider"> <tr> <th class="p-4 ">Chapter Number</th> <th class="p-4 ">Chapter Name</th> <th class="p-4 ">Added at</th> <th class="p-4 ">Status</th> </tr> </thead> <tbody class=""> <tr class="bg-stone-800 mt-6 text-white rounded" key={chapter.chapterNumber}> <td class="p-4">{chapter.chapterNumber}</td> <td class="p-4">{chapter.chapterName}</td> <td class="p-4">{chapter.addedAt}</td> <td class="p-4">{!chapter.published && 'Not published'}</td> </tr> <tr class="bg-stone-800 mt-6 text-white rounded" key={chapter.chapterNumber}> <td class="p-4">{chapter.chapterNumber}</td> <td class="p-4">{chapter.chapterName}</td> <td class="p-4">{chapter.addedAt}</td> <td class="p-4">{!chapter.published && 'Not published'}</td> </tr> <tr class="bg-stone-800 mt-6 text-white rounded" key={chapter.chapterNumber}> <td class="p-4">{chapter.chapterNumber}</td> <td class="p-4">{chapter.chapterName}</td> <td class="p-4">{chapter.addedAt}</td> <td class="p-4">{!chapter.published && 'Not published'}</td> </tr> <tr class="bg-stone-800 mt-6 text-white rounded" key={chapter.chapterNumber}> <td class="p-4">{chapter.chapterNumber}</td> <td class="p-4">{chapter.chapterName}</td> <td class="p-4">{chapter.addedAt}</td> <td class="p-4">{!chapter.published && 'Not published'}</td> </tr> </tbody> </table> </div>

css html-table tailwind-css tailwind-ui

回答 2 投票 0

如何使用 R 抓取 google 财经，其中多个页面的页面 url 不会更改？

我想用R网络抓取不同年份的股票财务表。但是，我可以获得去年的财务表，该表显示为默认值。但我也想从

r web-scraping html-table rvest google-finance

回答 1 投票 0

用php从sql记录生成表

我想生成一份 pdf 格式的公交车乘客列表。我的问题是，在右侧的每两个单元格中，每行的第一个单元格中都有同一个人。我想要

php mysql html-table

回答 1 投票 0

如何使用Markdown在表格中插入图片

如何使用Markdown在表格中插入图片普通的 html 语法工作正常，但 markdown 语法返回为表数据，请提出任何答案普通 HTML # 表格内的图像 <...

html image html-table markdown markup

回答 3 投票 0

html 表格存在跨度问题

我正在尝试创建一个包含 colspan 和 rowspan 的表。桌子 { 字体系列：arial、sans-serif； border-collapse: 折叠...</desc> <question vote="0"> <p>我正在尝试创建一个包含 colspan 和 rowspan 的表。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid black; text-align: left; padding: 8px; } .top { background-color: yellow; } .left { background-color: blue; } .right { background-color: green; } </style> </head> <body> <h2>HTML Table</h2> <table class=""> <tbody> <tr> <td rowspan="2"></td> <td colspan="5"></td> <td colspan="2" rowspan="2"></td> <td colspan="3" rowspan="2"></td> </tr> <tr> <td class="top" colspan="5"></td> </tr> <tr> <td rowspan="5"></td> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="2"></td> <td class="left" ></td> <td class="right" colspan="7"></td> </tr> <tr> <td rowspan="1"></td> <td colspan="10"></td> </tr> <tr> <td rowspan="1"></td> <td colspan="10"></td> </tr> </tbody> </table> </body> </html></code></pre> </div> </div> <p></p> <p>我想让最后的蓝色/绿色与前 4 行相同。但是当我将其更改为使用相同的 colspan 值时，结果如下。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid black; text-align: left; padding: 8px; } .top { background-color: yellow; } .left { background-color: blue; } .right { background-color: green; } </style> </head> <body> <h2>HTML Table</h2> <table class=""> <tbody> <tr> <td rowspan="2"></td> <td colspan="5"></td> <td colspan="2" rowspan="2"></td> <td colspan="3" rowspan="2"></td> </tr> <tr> <td class="top" colspan="5"></td> </tr> <tr> <td rowspan="5"></td> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td rowspan="1"></td> <td colspan="10"></td> </tr> <tr> <td rowspan="1"></td> <td colspan="10"></td> </tr> </tbody> </table> </body> </html></code></pre> </div> </div> <p></p> <p>它重新排列表格的宽度。我想根据 colspan 和 rowspan 保持初始宽度。</p> <p>我猜问题在于添加的 colspan/rowspan 值，但我不知道在哪里。</p> </question> <answer tick="false" vote="0"> <p>添加表格布局：固定；如下所示的表格CSS。</p> <pre><code>table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; table-layout: fixed; } </code></pre> <p>此外，您的第二个代码是正确的。您的表列没有数据。因此，该列的内容较少或没有内容，这意味着宽度主要受 colspan 的影响。如果单元格的 colspan = 5 并且没有太多内容，那么它可能看起来与多个单独的列具有相同的宽度。</p> <p>当我最初设置如下所示的 11 列时，您可以获得更正后的表格。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid black; text-align: left; padding: 8px; } .top { background-color: yellow; } .left { background-color: blue; } .right { background-color: green; } </style> </head> <body> <h2>HTML Table</h2> <table class=""> <tbody> <tr> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> </tr> <tr> <td rowspan="2"></td> <td colspan="5"></td> <td colspan="2" rowspan="2"></td> <td colspan="3" rowspan="2"></td> </tr> <tr> <td class="top" colspan="5"></td> </tr> <tr> <td rowspan="5"></td> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td rowspan="1"></td> <td colspan="10"></td> </tr> <tr> <td rowspan="1"></td> <td colspan="10"></td> </tr> </tbody> </table> </body> </html></code></pre> </div> </div> <p></p> <p>但是当我们添加内容时，它会自动更改布局。因此，将CSS添加到表格中，并修复表格在添加内容时不改变布局的问题。</p> </answer> </body></html>

html html-table

回答 0 投票 0

如何使用html表格打印乘法表（代码是Javascript）？

这是我的代码，它工作得很好。我只是想通过使用 Html 表格来打印表格，并且还想在其上应用 bootstrap 来添加边框，乘法表以...

javascript html css html-table bootstrap-4

回答 3 投票 0

单击鼠标隐藏表格列

我有一个表格，我想在双击某列时隐藏某列。隐藏列的代码实际上遍布 Stack Overflow。我所需要的只是关于如何/在哪里添加 ondblclick e 的提示...

javascript css html-table dom-events

回答 4 投票 0

Tanstack 表 v8 未调整列大小

有这个反应组件：从 '../../data.json' 导入 rawd；从“@tanstack/react-table”导入{flexRender，getCoreRowModel，useReactTable} 从“react&qu...