ブートストラップごとにテーブルをdivに変換するv4 beta

-2

私はブートストラップv4ベータ版を使用しています。私はテーブルを作った。どのように私はdivを使用して同じテーブルを作成することができます。ブートストラップごとにテーブルをdivに変換するv4 beta

<div class="container"> 
    <table class="table"> 
    <thead> 
     <tr> 
     <th>#</th> 
     <th class="text-center"><b>Id</b></th> 
     <th class="text-center"><b>Name</b></th> 
     <th class="text-center"><b>Munit</b></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td> 1</td> 
     <td class="text-center"> 294</td> 
     <td class="text-center"> nimai</td> 
     <td class="text-center"> kg</td> 
     </tr> 
     <tr> 
     <td> 2</td> 
     <td class="text-center"> 200</td> 
     <td class="text-center"> nitai</td> 
     <td class="text-center"> kg</td> 
     </tr> 
    </tbody> 
    </table> 
</div>

私もそれが下の写真のように見えると同じフォーマットをしたい：

出典

2017-12-04 Santhosh Yedidi

なぜあなたはしたいですか？これは表形式のデータのようです。したがって、「

」は意味的に正しいものです。 – Alex

問題は、この表の中にフォームを追加して、データをインラインで編集したり、ドロップダウンでreactjsを編集したりすることです。フォームが正しく追加されていません。いつか彼らは最後まで飛びます。 https://stackoverflow.com/questions/47619308/reactjs-how-to-create-table-withitable-rows-and-post-data-and-show-validatio –

あなたが妥協すべきかどうかわからない"それを動作させる"というセマンティクス。 – Alex

答えて

は、あなたが簡単にそれを作ることができ、この

.col { 
 
display: inline-block; 
 
} 
 

 
row { 
 
display: block; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div>First column</div> 
 
    <div> 1</div> 
 
    <div> 2</div> 
 
     <div>3</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div>Second column</div> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    </div> 
 
    
 
     <div class="col"> 
 
    <div>Third column</div> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    </div>

出典

2017-12-04 14:30:46

しかし、ここではテーブルのラベルを混ぜています。 –

をお試しくださいを使用して

.table { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.table-row { 
 
    width: 100%; 
 
    height: 10vw; 
 
    display: flex; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
.table-header { 
 
    font-weight: bold; 
 
} 
 

 
.table-row div:first-child { 
 
    width: 10% !important; 
 
} 
 

 
.table-row-column { 
 
    width: 30%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="container"> 
 
    <div class="table"> 
 
    <div class="table-row table-header"> 
 
     <div class="table-row-column table-row-index">#</div> 
 
     <div class="table-row-column table-center">Id</div> 
 
     <div class="table-row-column table-center">Name</div> 
 
     <div class="table-row-column table-center">Munit</div> 
 
    </div> 
 
    <div class="table-row"> 
 
     <div class="table-row-column table-row-index">1</div> 
 
     <div class="table-row-column table-center">294</div> 
 
     <div class="table-row-column table-center">nimai</div> 
 
     <div class="table-row-column table-center">kg</div> 
 
    </div> 
 
    <div class="table-row"> 
 
     <div class="table-row-column table-row-index">2</div> 
 
     <div class="table-row-column table-center">200</div> 
 
     <div class="table-row-column table-center">nitai</div> 
 
     <div class="table-row-column table-center">kg</div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-12-04 14:31:21

は、ブートストラップv4からディスプレイプロパティーの.d-tableなどを使用して表示できますか –

ブートストラップごとにテーブルをdivに変換するv4 beta

答えて

関連する問題