使用引导程序设计自定义单元尺寸表答案

【问题标题】：Design custom cell size table with bootstrap使用引导程序设计自定义单元尺寸表
【发布时间】：2016-02-11 16:01:23
【问题描述】：

我正在尝试使用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>

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

我不明白为什么这会显示不规则的外观。

【问题讨论】：

嗯，当您在标题中使用这些类时，它也会影响下面的行（这显然很好）。我不知道是否以及如何每行覆盖它。也许colspan 在这里工作？好多年没用了
@LiranBo 这是我想要实现的事情。
你可以操纵它。只需创建 12 个单元格并使用 colspan

标签： css twitter-bootstrap html-table

【解决方案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 基本上合并形容词单元格。

【讨论】：