どのようにデータ

Question

と同じ行の中にテーブルの見出しを表示するには、次のように私はデザインを持っている：

私はこれを達成するための最良の方法は、表を使用することであろうと仮定しますが、どのように私はおよそ行くだろうこのようにテーブルのスタイリング？つまり、データと同じ行にある表見出しを使用します。

Answer 1

がうまくあなたが必ずしも習慣行うためにテーブルを必要とする、これを行うには多くの方法がありますこの

データリストをお勧めします

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; 
}