Bootstrap таблица с некоторыми строками разной ширины

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). Я пробовал тонну html-свойств (width, colspan и т. Д.), А также пытался манипулировать столбцами с помощью bootstrap (class = "col-md-6").

Что я делаю неправильно и как его исправить?

EDIT: Это то, что я получаю с рекомендациями Банзай в :

Answer 1

Вы должны планировать таблицу, содержащую 4 ячеек в каждой строке, чем установленная Colspan соответственно.

<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>

И не использовать "седловины - * - *" классы с колонок таблицы. Они предназначены для создания гибких сеток.