如何在与数据相同的行中显示表标题

Question

我的设计如下：

我认为实现这一目标的最佳方法是使用表格，但我如何以这种方式设置表格？即表格标题与数据在同一行。

Answer 1

有很多方法可以做到这一点，你不一定需要一个表来做这个

我会推荐一个datalist

dl {
    margin-bottom:50px;
}
 
dl dt {
    padding:20px 0 0 0;  
    width:200px; 
    text-transform:UPPERCASE;
    font-size:80%;
}
 
dl dd {
    margin:0; 
    width:200px; 
    padding:0 0 20px 0;
}

.bg-grey{
  background-color:#ccc;
}

<dl>          
    <dt>Name: </dt>
    <dd><strong>Firt Last</strong></dd>
             
    <dt class="bg-grey">Country: </dt>
    <dd class="bg-grey">England</dd>
                 
    <dt>Rating: </dt>
    <dd>123456</dd>
                 
    <dt class="bg-grey">Games:</dt>
    <dd class="bg-grey">12345</dd>
</dl>

否则您可以只使用该表，但如果您想依赖纯HTML解决方案，则需要手动插入每个标头，否则必须使用javascript

Answer 2

就这样做：https://jsfiddle.net/z1g8w9es/

HTML：

<table>
<tr>
  <th>title</th>
</tr>
<tr>
  <td class="blue">lol</td>
</tr>
<tr>
  <td>lol2</td>
</tr>
<tr>
  <td class="blue">lol3</td>
</tr>
</table>

的CSS：

.blue{
  background-color: blue;
}