表のようにCSSと整列しますか？

Question

次の2行をテーブルのように並べることはできますか？最初の行はh2です。これはタイトルであり、残りはリストであるためです。最初の列はかなり広いはずですが、残りはテキスト内の幅と同じにすることができます。列はdivの幅を満たさなければなりません。

<div> 
<h2 class="header1"> 
<span class="span1">one</span> 
<span class="span2">two</span> 
<span class="span3">three</span> 
<span class="span4">four</span> 
</h2> 
<ul><li> 
<span class="span5">five</span> 
<span class="span6">six</span> 
<span class="span7">seven</span> 
<span class="span8">eight</span> 
</li></ul> 
</div> 

div {width: 500px;} 
h2 span, li span {float: left; width: auto; white-space: nowrap;} 

例：

Answer 1

HTML

<div class="table-like"> 
    <div> 
    <span>one</span> 
    <span>two</span> 
    <span>three</span> 
    <span>four</span> 
    </div> 
    <div> 
    <span>five</span> 
    <span>six</span> 
    <span>seven</span> 
    <span>eight</span> 
    </div> 
</div> 

CSS

正直なところ

.table-like { 
    display: table; 
    width: 500px; 
} 

.table-like div { 
    display: table-row; 
} 

.table-like div span { 
    display: table-cell; 
} 

/* add borders */ 
.table-like, 
.table-like div span { 
    border: 1px solid black; 
} 

/* bold on 1st row */ 
.table-like div:nth-child(1) { 
    font-weight: bold; 
} 

jsFiddle Demo

Answer 2

、あなたは、表形式のデータを表示するテーブルを使用しようとしている場合。テーブルには何も問題はありません。テーブル以外のコンテンツを配置する場合にのみ使用します。表の書式設定のヘルプが必要な場合は、質問を編集してください。

Answer 3

は、ディスプレイを使用してみてください：インラインブロック：

h2{display: inline-block; margin:0 padding:0; min-width: 300px}/*use min-width what you want*/ 
ul, ul li{display: inline-block; margin:0; padding: 0;}