gpt4 book ai didi

html - 在不使用 rowspan 的情况下创建语义正确的表

转载 作者:行者123 更新时间:2023-11-28 02:06:17 25 4
gpt4 key购买 nike

我正在尝试使用纯 HTML 和 CSS 制作一份简历,并希望它尽可能保持整洁。在 this fiddle我已经构建了我想要实现的布局。

这显然不是最漂亮的解决方案,因为如果“语言”条目太长,它就会中断。

Rowspan 更简洁一些,但是会出现两个问题:

首先,每当我向列表中添加一个新条目时,我都必须增加 colspan(我不想使用任何脚本,KISS)。

其次,更令人担忧的是,td:first-child选择器不考虑行跨度。残骸可见this fiddle

我尝试过的另一种方法是使用 <ul>然后使用 ul:before选择器以在 block 前面添加灰线和“语言”文本。出现新挑战:设置content在这个伪元素上会将它放在 上方 <ul> .

您认为处理这种情况的最干净、最简洁的方法是什么?

最佳答案

使用 divsfloat 来制作两列怎么样?你可以在右侧放置任何你想要的东西,表格,ul,任何东西。

HTML

<div id="resume">
<div class="category">Skills</div>
<div class="left">Languages</div>
<div class="right">asfd<br /> asfd<br /> asfd<br /> asfd<br /></div>
<div class="divider"></div>

<div class="left">Languages</div>
<div class="right">asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /></div>
<div class="divider"></div>

<div class="category">Skills</div>
<div class="left">Languages</div>
<div class="right">asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /></div>
<div class="divider"></div>
</div>

CSS

.divider {
clear: both;
padding-bottom: 10px;
}

.category{
padding-left: 100px;
font-weight: bold;
}

.left {
float: left;
width: 100px;
}
.right {
float: left;
}

DEMO

关于html - 在不使用 rowspan 的情况下创建语义正确的表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11318056/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com