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

Question

我正在尝试使用纯 HTML 和 CSS 构建简历，并希望尽可能保持简洁。在这个小提琴中，我构建了我想要实现的布局。

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

Rowspan 更简洁一些，但是会出现两个问题：

首先，每当我在列表中添加一个新条目时，我都必须增加 colspan（我不想使用任何脚本，KISS）。

其次，更令人担忧的是，td:first-child选择器不考虑行跨度。在这个小提琴中可以看到残骸

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

你认为处理这种情况的最干净、最精简的方法是什么？

Answer 1

使用divsandfloat制作两列怎么样？你可以把任何你想要的东西放在右边，桌子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;
}

演示