Bootstrap table with certain rows different widths

Question

I have a table:

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

Currently it looks like this:

I am trying to figure out how to make the middle cell on the bottom 2 rows go away so that the 2 fields will be equal in size (50/50). I have tried a ton of html properties (width, colspan etc) as well as trying to manipulate the columns with bootstrap (class="col-md-6").

What am I doing wrong and how do I fix it?

EDIT: This is what I get with Banzay's recommendations:

Answer 1

You need to plan the table that contains of 4 cells in each row, than set colspan respectively.

<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

Just play with 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>

And don't use "col-*-*" classes with table columns. They are designed to build responsive grids.