Question

我正在尝试使用grid system概念设计具有引导程序的自定义单元格大小的表格;以下模拟可能有助于我想要实现的目标。

| ________ | _________________ | _____________ | ______________ | | ________ | ______________________________________________ | | _____________ | _________________________________________ | | ______________________ | ________________________________ | | __________ | ___________________ | _________ | ______________ |

HTML：

<table class="table table-responsive">
    <tr>
        <td class="col-xs-2">Voucher Number</td>
        <td class="col-xs-2 text-left">13303</td>
        <td class="col-xs-4 text-right">Date of issue</td>
        <td class="col-xs-4 text-left">Dec 12, 2015</td>
    </tr>
    <tr>
        <td class="col-xs-3">Name of Patient</td>
        <td class="col-xs-9 text-left">Muhammad Umair</td>
        <td></td>
        <td></td>
    </tr>
</table>

但它在设计视图中中断;像这样

我不明白为什么这会表现出不规则的外观。

Answer 1

不是一个美丽的景象，但如果你真的需要它 - JSFIDDLE

HTML - 注意第一个隐藏行（定义所有单元格大小）

<table class="table table-responsive">
    <tr class="hidden">
        <th class="col-xs-1"></th>
        <th class="col-xs-1"></th>
        <th class="col-xs-1"></th>
        <th class="col-xs-1"></th>
        <th class="col-xs-1"></th>
        <th class="col-xs-1"></th>
        <th class="col-xs-1"></th>
        <th class="col-xs-1"></th>
        <th class="col-xs-1"></th>
        <th class="col-xs-1"></th>
        <th class="col-xs-1"></th>
        <th class="col-xs-1"></th>
    </tr>
    <tr>
        <th colspan="2">Voucher Number</th>
        <th colspan="4">13303</th>
        <th colspan="4">Date of issue</th>
        <th colspan="2">Dec 12, 2015</th>
    </tr>
    <tr>
        <td colspan="2">val1</td>
        <td colspan="10">val2</td>
    </tr>
    <tr>
        <td colspan="2">Name of Patient</td>
        <td colspan="3">Name of Patient</td>
        <td colspan="3">Muhammad Umair</td>
        <td colspan="4">Muhammad Umair</td>
    </tr>
</table>

CSS - 只是为了突出显示边框

td, th{
    border: solid;
}

这绝对是一种解决方法，可能有更好的方法。

注意： colspan基本上合并了广告单元格。

使用bootstrap设计自定义单元格大小表

1 个答案: