ブートストラップテーブル

Question

私はテーブルを持っている：

    <table class="table table-bordered"> 
         <tr> 
          <th class="text-center" colspan="3"> 
           DRUG INFO 
          </th> 
         </tr> 
         <tr> 
          <td class="col-md-4"><span>{{item.fields[18].displayName}}</span></td> 
          <td class="col-md-3"><span>{{item.fields[25].displayName}}</span></td> 
          <td class="col-md-5"><span>{{item.fields[14].displayName}}</span></td> 
         </tr> 
         <tr> 
          <td> 
           <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div> 
          </td> 
          <td> 
           <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div> 
          </td> 
          <td> 
           <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div> 
          </td> 
         <tr> 
          <td colspan="1">UD_UU_PKG</td> 
          <td></td> 
          <td colspan="1">SHORT_CYCL</td> 
         </tr> 
         <tr> 
          <td> 
           <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div> 

          </td> 
          <td> 

          </td> 
          <td> 
           <div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div> 
          </td> 
         </tr> 
         </tr> 
        </table> 

は現在、それは次のようになります。

私は上の真ん中のセルを作る方法を把握しようとしています下の2行が消えて、2つのフィールドのサイズが同じになります（50/50）。私は、ブートストラップ（クラス= "col-md-6"）で列を操作しようとするだけでなく、htmlプロパティ（幅、colspanなど）のトンを試してみました。

私は間違っていますが、どうすれば修正できますか？

EDIT：これは私がBanzayの推奨で得るものです：

Answer 1

あなたはそれぞれCOLSPANを設定するよりも、各行の4つのセルの含むテーブルを計画する必要があります。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
      <table class="table table-bordered"> 
 
         <tr> 
 
          <th class="text-center" colspan="4"> 
 
           DRUG INFO 
 
          </th> 
 
         </tr> 
 
         <tr> 
 
          <td class="col-md-4"><span>{{item.fields[18].displayName}}</span></td> 
 
          <td class="col-md-3" colspan="2"><span>{{item.fields[25].displayName}}</span></td> 
 
          <td class="col-md-5"><span>{{item.fields[14].displayName}}</span></td> 
 
         </tr> 
 
         <tr> 
 
          <td> 
 
           <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div> 
 
          </td> 
 
          <td colspan="2"> 
 
           <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div> 
 
          </td> 
 
          <td> 
 
           <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div> 
 
          </td> 
 
         <tr> 
 
          <td colspan="2">UD_UU_PKG</td> 
 
          <td colspan="2">SHORT_CYCL</td> 
 
         </tr> 
 
         <tr> 
 
          <td colspan="2"> 
 
           <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div> 
 

 
          </td> 
 
          <td colspan="2"> 
 
           <div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div> 
 
          </td> 
 
         </tr> 
 

 
        </table>

Answer 2

だけcolspansと遊ぶ：

<table> 
 
    <tr> 
 
    <th colspan="6"> 
 
     DRUG INFO 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">Effective date</td> 
 
    <td colspan="2">Minimum order</td> 
 
    <td colspan="2">Total package</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2"> 
 
     <input type="text"> 
 
    </td> 
 
    <td colspan="2"> 
 
     <input type="text"> 
 
    </td> 
 
    <td colspan="2"> 
 
     <input type="text"> 
 
    </td> 
 
    <tr> 
 
     <td colspan="3">UD_UU_PKG</td> 
 
     <td colspan="3">SHORT_CYCL</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3"> 
 
     <input type="text"> 
 
     </td> 
 
     <td colspan="3"> 
 
     <input type="checkbox"> 
 
     </td> 
 
    </tr> 
 
</table>

そして "COL - * - *" を使用していないテーブルの列を持つクラスを。応答性の高いグリッドを構築するように設計されています。