ワイドボトムカラムのブートストラップhtmlテーブル

Question

このようなテーブルを作成する必要があります。

しかし、私はスタイル

table class="table table-striped table-hover" 

を使用したいので、そう何を絵に見ることのみ3テーブルの行ではなく、6を持つことができ、ブートストラップのテーブルにすることが重要であるが、それは可能ですか？

Answer 1

COLSPANとROWSPAN属性は、トリックを行う必要があります。

は、このコードを試してみてください。

<div class="table-responsive" style='width:50%'> 
    <table class="table table-striped table-hover"> 
     <tr> 
      <td rowspan="3">Name</td> 
      <td>Sex</td> 
      <td>Age</td> 
     </tr> 
     <tr> 
      <td colspan="2">Junmar Jose</td> 
     </tr> 
     <tr> 
      <td colspan="2">Weslie Andrea Lavita</td> 
     </tr> 
     <tr> 
      <td rowspan="3">Name</td> 
      <td>Sex</td> 
      <td>Age</td> 
     </tr> 
     <tr> 
      <td colspan="2">Junmar Jose</td> 
     </tr> 
     <tr> 
      <td colspan="2">Weslie Andrea Lavita</td> 
     </tr> 
    </table> 
</div> 

ここでは、出力のスクリーンショットです：

これはどのように列を表示するためだけのダミーデータであり、行が区切られます。

希望すると便利です。がんばろう！