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

Question

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

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

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

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

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

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

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

Answer 1

使用 divs 和 float 来制作两列怎么样？你可以在右侧放置任何你想要的东西，表格，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