Css 具有不同宽度的特定行的引导表

我有一张桌子：

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

药品信息
{{item.fields[18].displayName}
{{item.fields[25].displayName}
{{item.fields[14].displayName}
乌德乌乌包装
短周期

现在看起来是这样的：

我试图找出如何使底部两行的中间单元格消失，以便两个字段的大小相等（50/50）。我尝试了大量的html属性（宽度、colspan等），也尝试了使用bootstrap（class=“col-md-6”）操作列

我做错了什么？我如何修复它

---

编辑：这是我从Banzay的建议中得到的：

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

药品信息
{{item.fields[18].displayName}
{{item.fields[25].displayName}
{{item.fields[14].displayName}
乌德乌乌包装
短周期

只需玩Colspan：

药品信息
生效日期
最低订单
总包装
乌德乌乌包装
短周期

@谢谢您的回答。但我希望底部的两行居中，像1.5 colspan一样。@DavidTunnell居中，像这样或那样：？正如您在代码段中看到的，代码工作正常。你的截图看起来很奇怪。可能是因为在你的页面中使用了任何额外的css或框架？顺便说一句，有问题的代码包含冗余的

。我在回答中删除了它。你试过复制粘贴整个答案代码吗？