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属性（宽度，colspan等）以及尝试使用bootstrap操作列（class =＆＃34; col-md-6＆＃34;）。

我做错了什么以及如何解决？

编辑：这是Banzay的建议所得到的：

Answer 1

您需要计划每行包含4个单元格的表，而不是分别设置colspan。

＆＃13;

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

＆＃13;

Answer 2

玩colspans：

＆＃13;

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

＆＃13;

并且不要使用＆＃34; col - * - *＆＃34;带有表列的类。它们旨在构建响应式网格。

具有不同宽度的某些行的Bootstrap表

2 个答案: