html - 在html中制作自定义表格

Question

是否可以像这样用 HTML 和 CSS 制作表格？

我想要一个全高的列(在右边)，其余的是图片上的行。

Answer 1

您可以使用网格轻松实现此目的:

.thead {
    padding: 5px;
    grid-area: thead;
    border: 3px solid gray;
}

.col {
    grid-area: col;
    border: 3px solid red;
}

.r {
    border: 3px solid green;
    padding: 5px;
}
.row-1 {
    grid-area: row-1;
}
.row-2 {
    grid-area: row-2;
}
.row-3 {
    grid-area: row-3;
}
.row-4 {
    grid-area: row-4;
}
.row-5 {
    grid-area: row-5;
}

.container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
    "thead thead"
    "row-1 col"
    "row-2 col"
    "row-3 col"
    "row-4 col"
    "row-5 col";
}

<div class="container">
        <div class="thead">thead</div>
        <div class="col">Col</div>
        <div class="r row-1">Row 1</div>
        <div class="r row-2">Row 2</div>
        <div class="r row-3">Row 3</div>
        <div class="r row-4">Row 4</div>
        <div class="r row-5">Row 5</div>
 </div>
 
 

Grid-template-areas确实值得研究。