設計自定義單元格大小表引導

Question

我試圖設計表使用grid system概念自定義單元格的大小與引導;下面的模型可能有助於我嘗試實現的目標。

---

| ________ | _________________ | _____________ | ______________ | | ________ | ______________________________________________ | | _____________ | _________________________________________ | | ______________________ | ________________________________ | | __________ | ___________________ | _________ | ______________ |

HTML：

<table class="table table-responsive"> 
    <tr> 
     <td class="col-xs-2">Voucher Number</td> 
     <td class="col-xs-2 text-left">13303</td> 
     <td class="col-xs-4 text-right">Date of issue</td> 
     <td class="col-xs-4 text-left">Dec 12, 2015</td> 
    </tr> 
    <tr> 
     <td class="col-xs-3">Name of Patient</td> 
     <td class="col-xs-9 text-left">Muhammad Umair</td> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

，但它打破了設計圖。像這樣

我不明白爲什麼這顯示不規則的外觀。

Answer 1

不是一個漂亮的景象，但如果你真的需要它 - JSFIDDLE

HTML - 首先注意到的隱行（定義了所有細胞的大小）

<table class="table table-responsive"> 
    <tr class="hidden"> 
     <th class="col-xs-1"></th> 
     <th class="col-xs-1"></th> 
     <th class="col-xs-1"></th> 
     <th class="col-xs-1"></th> 
     <th class="col-xs-1"></th> 
     <th class="col-xs-1"></th> 
     <th class="col-xs-1"></th> 
     <th class="col-xs-1"></th> 
     <th class="col-xs-1"></th> 
     <th class="col-xs-1"></th> 
     <th class="col-xs-1"></th> 
     <th class="col-xs-1"></th> 
    </tr> 
    <tr> 
     <th colspan="2">Voucher Number</th> 
     <th colspan="4">13303</th> 
     <th colspan="4">Date of issue</th> 
     <th colspan="2">Dec 12, 2015</th> 
    </tr> 
    <tr> 
     <td colspan="2">val1</td> 
     <td colspan="10">val2</td> 
    </tr> 
    <tr> 
     <td colspan="2">Name of Patient</td> 
     <td colspan="3">Name of Patient</td> 
     <td colspan="3">Muhammad Umair</td> 
     <td colspan="4">Muhammad Umair</td> 
    </tr> 
</table> 

CSS - 只是亮點毗鄰

td, th{ 
    border: solid; 
} 

這是挑釁一種變通方法，在重新可能是更好的方法。

提示：colspan它基本上合併了adject單元格。