我试图创建一个布局,基本上是一个表格/CSS网格,自动对齐跨多行水平文本。行/列表项应该是可点击的,可以通过tabindex进行制表,并且有一些边框和交替的背景。
虽然在本例中列中的文本是相同的,但实际应用程序中并不存在。可能有一个较长的数字在第一列,一个较短的第二列,一个较长的第三列,甚至一些文本,所以我需要布局自动对齐这些列宽。红线仅用于说明。
只要列表项中只有一行内容,这就没有问题,但是当我有多行内容时,我该如何解决这个问题呢?如果这是一个表格布局,我需要的将是将两个<tr>
组合在一起,tabindex/focus,onclick和visuals。
我可以用一个display: contents;
容器将它们分组,并仍然通过.contents-selector > *
根据背景和边框来设置它们的样式,我猜,但我不能在.contents-selector
类上使其可制表或可点击。
也许有一个完全不同的方法来解决这个问题,我没有考虑。当然,我可以用一些简单的东西来实现我的布局,比如使用表格来布局,在较长的文本上使用position: absolute;
,在另一个列上使用<br>
等等。虽然我不知道我得到了多少行,我需要多少个<br>
,但这不是解决这个问题的正确方法。
**编辑:**解决方案是tbody
的用法:https://stackoverflow.com/a/76546055/1900980
2条答案
按热度按时间5f0d552i1#
解决方案是每“行”使用一个
tbody
,它可以包括两个tr
。tbody
可以与tabindex和onclick一起使用,并且可以通过nth-child
,first-child
和last-child
等选择器进行样式化。ijxebb2r2#
您可以使用一个简单的html
table
来实现此功能,并使用put each row or row-groups inside a
tbody. you can now use the
tbodyto style or set
onclicklisteners or
tab索引`