Bootstrap表嵌套3行，並有另一個列與其他3個嵌套行一樣大

Question

我不是一個HTML/UI人，這就是我需要使用Bootstrap的原因。這簡化了我需要的UI部分的大部分內容。

但是，當談到桌子時，我迷路了。

我附上了一張照片。 你能否提供html部分？

http://i.imgur.com/PtajoC3.png?1

我目前的HTML：

<div class="row"> 
    <div class="col-sm-6" style="background-color:lavender;">.col-sm-6 
    </div> 
    <div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-2 
     <div class="row"> 
     <div style="background-color:lightcyan;">.col-sm-6</div> 
     </div> 
     <div class="row"> 
     <div style="background-color:lightgray;">.col-sm-6</div> 
     </div> 
    </div> 
    </div> 

Answer 1

您可以使用HTML表的行跨度屬性。

下面是一個例子：

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_rowspan

Answer 2

HTML代碼：

<div class="container" > 

     <div class="row"> 
      <div class="col-md-7 col-xs-10 pull-left table100"> 
       <p>Hello</p> 
       <div class="table-responsive"> 
        <table class="table table-bordered "> 
         <tbody> 
          <tr> 
           <td>cols1</td> 
           <td>cols2</td> 
           <td>cols3</td> 
           <td>cols4</td> 

          </tr> 
          <tr> 
           <td rowspan="3">1</td> 
           <td>a</td> 
           <td></td> 
           <td></td> 

          </tr> 
          <tr> 

           <td>b</td> 
           <td></td> 
           <td></td> 

          </tr> 
          <tr> 

           <td>c</td> 
           <td></td> 
           <td></td> 

          </tr> 
          <tr> 
           <td rowspan="3">2</td> 
           <td></td> 
           <td></td> 
           <td></td> 

          </tr> 
          <tr> 

           <td></td> 
           <td></td> 
           <td></td> 

          </tr> 
          <tr> 

           <td></td> 
           <td></td> 
           <td></td> 

          </tr> 
         </tbody> 
        </table> 
       </div> 


      </div> 
     </div> 
    </div> 

CSS代碼：

td{height:50px}

這裏的JS FIDDLE DEMO

我希望你得到妥善解決。