css定位模仿html表

我在那里的一个项目上工作，我想在两列中显示数据。每列将包含一个标题，我正试图定位在列的左侧，以及一些数据，这些数据将定位在标题旁边（列的右侧）

我遇到的问题是，当更改屏幕大小或存在大量数据时，我似乎无法将标题和数据保持在相同的位置。数据不断下降，低于标题，这不是我要找的

我尝试了以下css/html。我很确定我已经接近了。我也尝试过使用html表格，但根本不会调整大小。想知道是否有人知道如何调整我的代码，使我的布局如下图所示：

我的代码：

.left, .right{
width: 49%;
float: left;
}
.block{
width: 100%;
float: left;
position:relative;
}
.leftHead, .rightHead{
width: 20%;
float: left;
}
.leftData, .rightData{
width: 79%;
float: left;
font-weight: bold;
}
<div class='left'>
    <div class='block'>
          <div class='leftHead'>
                left head
          </div>
          <div class='leftData'>
                left data
          </div>
    </div>
</div>
<div class='right'>
    <div class='block'>
          <div class='rightHead'>
                right head 1
          </div>
          <div class='rightData'>
                right data 1
          </div>
    </div>
    <div class='block'>
          <div class='rightHead'>
                right head 2
          </div>
          <div class='rightData'>
                right data 2
          </div>
    </div>
</div>

.left、.right{
宽度：49%；
浮动：左；
}
.街区{
宽度：100%；
浮动：左；
位置：相对位置；
}
.左头，.右头{
宽度：20%；
浮动：左；
}
.leftData、.rightData{
宽度：79%；
浮动：左；
字体大小：粗体；
}
左脑
左数据
右脑1
右数据1
右首2
右数据2

对于这种类型的数据，我肯定会使用表。在这里，我将数据列的宽度（

td

）设置为100%，并将标题列（

th

）设置为不换行。也许这就是你想要的

table.two-column{
宽度：50%；
浮动：左；
边界塌陷：塌陷；
}
.第二栏{
空白：nowrap；
}
.两列td{
宽度：100%；
}
.第二栏，
.两列td{
垂直对齐：顶部；
填充：.25em；
}
表1.4.4，
表1.1橙色td{
边框：2倍纯色橙色；
}
表1.1绿色th，
表1.1绿色运输署{
边框：2倍纯绿；
}

标题1
这里有大量的数据，这些数据会导致单元格断开为新行，但标题应保持与顶部垂直对齐。
标题2
数据2
标题3
数据3
标题4
这里有大量的数据，这些数据会导致单元格断开为新行，但标题应保持与顶部垂直对齐。

对于“tabled”元素，使用

显示：表格单元格

而不是

浮动

.left, .right{
    width: 49%;
    float: left;
}
.block{
    width: 100%;
    position:relative;
}
.leftHead, .rightHead{
    width: 20%;
    display: table-cell;
}
.leftData, .rightData{
    width: 79%;
    font-weight: bold;
    display: table-cell;
}

---

这是一个。

吉米，你是上帝！非常感谢你。这正是我想要完成的。好的，很好。如果非破坏性的th给你带来麻烦，你可以用别针固定它们的宽度。例如：

th{width:20%}td{width:80%}

这将使标题始终占其各自表格的20%。此外，我还修改了答案，以包括

垂直对齐：顶部

以更接近所需的格式。您知道如何在将屏幕大小调整为较小尺寸时使其不切断表格吗？我看不到它被切断，但我的浏览器只缩小到大约350像素：你的看起来不同吗？您可以做的一件事是为表指定

min width

。这将导致表格在达到最小宽度时从水平布局切换到垂直布局。例如：

表格{最小宽度：350px}