程序设计 html-table

13

我正在寻找一种表排序解决方案（使用JavaScript），但似乎还找不到合适的解决方案。我只需要按字母顺序对每一列进行排序。它不需要忽略任何代码或任何数字或使用货币。只需单击列标题即可将其从已排序的z / za中切换出来。有人知道这样一个非常简单的解决方案吗？

72 javascript sorting html-table

12

您将如何操作：表格或CSS？[关闭]

从目前的情况来看，这个问题不适合我们的问答形式。我们希望答案能得到事实，参考或专业知识的支持，但是这个问题可能会引起辩论，争论，民意调查或扩展讨论。如果您认为此问题可以改善并且可以重新提出，请访问帮助中心以获取指导。 8年前关闭。（资源： sontag.ca）第一部分可以使用2个HTML表（一个嵌套在另一个中，甚至只用一个表）来非常简单地完成此布局。也可以使用CSS来完成，尽管可能需要更多的思考。这可能不是现实世界的布局，但我看到了相似的页面。认为这是一个谜。锻炼您的CSS技能的练习。为了使事情变得更有趣，我在一个名为The Challenge的分为两部分的网页中对该问题进行了框架化。我们将检查代码和问题：使用表还是CSS进行布局？，并排，逐击，因为我们的两个对手为代码至上而战。第一部分阐述了挑战的产生。我希望你喜欢。第二部分是决策。您可能会感到惊讶。第二部分发布后仅几分钟，我很快就收到了如此迅速的回答，真让我感到惊讶。这是一次令人沮丧的经历。我不希望与您竞争计时赛。但是，话虽这么说，在仔细检查了所提供的解决方案之后，我才意识到，没有一个CSS解决方案（包括当时的我自己的）和所提供的任何一个表解决方案一样有效。挑战在于CSS优于任何表格布局解决方案而言，。因此，我添加了3条新规则（请记住，其中一条规则是可以更改的规则）。这使某些人感到恼火。因此，我随后添加了一些有关为什么更改规则的精彩解释。我认为这使他们更加恼火。我们的花园要围着篱笆。使它与可能遇到的沉闷环境区分开的东西；而且不太贵，但易于保持清洁。所以我想要花园周围有一个1像素的黑色边框每个花园地块（字符）上的居民必须为黑色或白色，具体取决于哪个显示出他们的花园中最好的。而且它们都是草书血统。它们之间没有斜体。;-) 花园是可重定位的，也就是说，我可以在页面上的任何位置（没有绝对定位）拥有这个花园。这是最终输出的样子（背景颜色可选）：（来源： sontag.ca）我对反复无常和最后一分钟的规则表示歉意。我错了每个花园地块的居民都是手工制作的手工匠人。他们是草书家族的后裔，他们的风格感归功于斜体。花园必须可重定位，因为两种花园（表和CSS）都需要在同一页面上共存。我可能会说错position:absolute不允许使用规则。如果您可以让他们在这种情况下工作，那么您将获得更大的权力。他们一定会被接受。我要求在地块周围设置围栏，因为每种花园类型都将种植在橙色背景的乡村中，该乡村背景与我们所种花朵的颜色非常相似。我现在住在荷兰，郁金香季节快到了。如果您在接下来的几周内飞越荷兰，而且天气晴朗（这里很少见），那么您下面的风景将看起来很像这项愚蠢的练习。我并不喜欢橙色，但我喜欢并欣赏荷兰人，所以这就是为什么我们有橙色背景，以向东道国致敬。:-) 第三部分我已经将《挑战》中的Ted的表格答案与这张图片一起发布了（来源： sontag.ca）因为可以轻松地将居住者添加到花园中，而无需触及CSS规则-一切都会自动居中。你能用 CSS 做到吗？你能用...鲱鱼砍掉森林里最强大的树吗？更新：查理的答案在这里。

71 css layout xhtml html-table

9

固定了带水平滚动条和垂直滚动条的标题表

我一直试图找出这个问题，我有html / css粘页眉+滚动条。我们正在创建一个程序，当容器大小达到某个点时（取决于用户的分辨率），该程序需要滚动条才能显示。我在表的第二列上强制使用最小宽度，因此表在特定点处停止减小，并强制容器保持在特定宽度。容器上的溢出显示水平滚动条。一切正常。一旦我添加了第二个滚动条进行垂直滚动，事情就变得一团糟。有人对此问题有解决方案吗？我想在.table-body上有一个垂直滚动条，但是滚动条必须在externalcontainer上可见。固定头表是否有很好的html / css解决方案？我已经搜索了一个星期，但是只能找到这种行为的jQuery插件。这是我当前的HTML： <!DOCTYPE html> <html> <head> <title>fixed header prototyping</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="outer-container">  <div class="inner-container"> <div class="table-header"> <table id="headertable" width="100%" cellpadding="0" cellspacing="0"> <thead> <tr> <th class="header-cell col1">One</th> <th class="header-cell col2">Two</th> <th class="header-cell col3">Three</th> <th class="header-cell col4">Four</th> …

68 html css header html-table fixed

2

如何使用CSS类在td元素内对齐div

它以这种方式工作 <td align="center"> 但是我想使用CSS类。我这样定义班级但没有运气 td { vertical-align: middle; text-align: center; margin-left: auto; margin-right: auto; align: center; } 垂直对齐有效，文本对齐有效。但是它不能通过这种方式将td内的div对齐。我想在TD内对齐div。

68 html center alignment html-table

5

使用CSS，如何“紧密”对齐“ A”与“ B”的底部/末端，其中“ B”的宽度和文字环绕未知

我有一个“可排序”表，其中当前排序列的标题显示一个图标：排序图标将显示在文本的末尾（即，我们支持LTR / RTL）。我目前正在使用display:flex。但是，如果表的宽度缩小并且列标题文本开始换行，则我将进入不清楚的状态，即不清楚对哪一列进行排序：相反，我想满足以下要求：图标始终与最长文本行的“结尾”“紧密”对齐（即使换行单元格/按钮较宽）。图标也应与文本的最后一行在底部对齐。该图标绝对不能缠绕在自己的一行上。该按钮必须存在并且应跨越单元的整个宽度。（它的内部样式和标记可以根据需要更改。）仅在可能的情况下使用CSS和HTML。它不能依赖已知/设置的列宽或标题文本。例如：我一直在尝试了一堆的不同组合display: inline/inline-block/flex/grid，position，::before/::after，甚至float（！），但无法获得所需的行为。这是我当前的代码演示问题： .table { border-collapse: collapse; width: 100%; } .thead { border-bottom: 3px solid #d0d3d3; } .thead .tr { vertical-align: bottom; } .button { padding: 1rem; text-align: start; font-family: Arial, "noto sans", sans-serif; font-size: 0.875rem; border: 0; background-color: …

9 html css layout html-table alignment

Questions tagged «html-table»