如何使它看起来像一个带有CSS的表？

Question

您好，我在上传CSV文件时插入的WordPress说明中获得了此代码。

现在，文本看起来也不太好看，我想将其制成表格，但是HTML表格代码中未包含此代码。

现在我明白了：

<dt class="xsc">Weight:</dt>

<dd class="datalist__value datalist__value--horizontal"><span class="datalist__value__inner">82g</span></dd>

这显示重量：                82克

如何使用CSS使它看起来像这样？

谁将帮助我获得10亿业力积分！ ：）

Answer 1

您可以使用display: table。文档为here。

Here是更详细的文档。

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      Gross but sometimes useful.
    </div>
  </div>
</div>

并且您不需要使用table html标签。

Answer 2

看看这是否仅对CSS有帮助，您只需添加一个div

.fake-table {
    width: 200px;
}

.fake-table dt, .fake-table dd {
    background-color: #f5f5f5;
    width: 46%;
    float: left;
    margin: 0;
    padding: 4px 2%;
    border-bottom: 1px solid #fff;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fake-table:after {
    content: "";
    display: table;
    clear: both;
}

.fake-table dt:hover, .fake-table dd:hover {
    background-color: #eee;
}

<div class="fake-table">

  <dt class="xsc">Weight:</dt>

  <dd class="datalist__value datalist__value--horizontal">
<span class="datalist__value__inner">82g</span>
 </dd>
 
 <dt class="xsc">jfkldsf fjdklf fjdsklf fjdkslf fjdksl</dt>

  <dd class="datalist__value datalist__value--horizontal">
<span class="datalist__value__inner">82g</span>
 </dd>
 
 <dt class="xsc">Weight:</dt>

  <dd class="datalist__value datalist__value--horizontal">
<span class="datalist__value__inner">82g</span>
 </dd>

</div>