Дизайн таблицы размеров ячеек с bootstrap

Я пытаюсь создать таблицу с пользовательскими размерами ячеек с бутстрапом с использованием grid system концепции; следующий макет может помочь тому, чего я пытаюсь достичь.Дизайн таблицы размеров ячеек с bootstrap

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

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>

но он ломает в режиме конструктора; например

Я не понимаю, почему это шоу нерегулярно выглядит.

источник

2015-11-10 mumair

Хм, когда вы используете эти классы в заголовке, он также влияет на строки ниже (что очевидно хорошо). Я не знаю, как и как вы можете перезаписать его в каждой строке. может быть, 'colspan' работает здесь? не использовали его в годах – LiranBo

@ LiranBo эта вещь возможна, чего я хочу достичь. – mumair

Вы можете манипулировать им. просто создайте 12 ячеек и используйте colspan – LiranBo

не очень красиво, но если вам это действительно нужно - 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; 
}

Это вызывающе обходное решение, re может быть лучшим способом.

Уведомление:colspan, который в основном объединяет ячейки приложения.

источник

2015-11-10 17:35:58 LiranBo

Дизайн таблицы размеров ячеек с bootstrap

ответ

Смежные вопросы