Russian English
jQuery Plugins & Javascript Functions
PHP Classes & Functions
HTML && CSS Frameworks

CSS Framework Bootstrap Tables

Опубликовано: 19.12.2015

Скачать CSS Bootstrap Tables последнюю версию

Набор инструмнтов для Bootstrap позволяющий упростить позиционирование элементов с неизвестным содержимым при помощи использования таблиц.

bootstrap.tables.scss
/*!
 CSS Framework Bootstrap Tables 1.0.0
 http://skidanov.ru/dev/css-frameworks/bootstrap-tables/
 https://github.com/skidanovdima/css-bootstrap-tables
 */

@media screen and (min-width: 1200px) {
  .table-lg {
    display: table;
  }
  .td-lg {
    display: table-cell;
    float: none;
    vertical-align: middle;
  }
}
@media screen and (min-width: 992px) {
  .table-md {
    display: table;
  }
  .td-md {
    display: table-cell;
    float: none;
    vertical-align: middle;
  }
}
@media screen and (min-width: 768px) {
  .table-sm {
    display: table;
  }
  .td-sm {
    display: table-cell;
    float: none;
    vertical-align: middle;
  }
}
.table-xs {
  display: table;
}
.td-xs {
  display: table-cell;
  float: none;
  vertical-align: middle;
}

Примеры

<script src="http://skidanov.ru/sources/css-frameworks/bootstrap.tables/bootstrap.tables.min.css"></script>
<style>
    .one {
        background:#fcc;
    }
    .two {
        background:#cfc;
    }
    .three {
        background:#ccf;
    }
</style>
<h3>Без <strong>Bootstrap Tables</strong></h3>
<div class="col-xs-4 one">
    Первый блок с большим содержимым.
    Первый блок с большим содержимым.
    Первый блок с большим содержимым.
    Первый блок с большим содержимым.
    Первый блок с большим содержимым.
    Первый блок с большим содержимым.
</div>
<div class="col-xs-4 two">
    Второй блок со средним содержимым.
    Второй блок со средним содержимым.
    Второй блок со средним содержимым.
</div>
<div class="col-xs-4 three">
    Третий блок с малым содержимым.
</div>

<div class="clearfix"></div>

<h3>С применением <strong>Bootstrap Tables</strong></h3>
<div class="table-xs">
    <div class="col-xs-4 td-xs one">
        Первый блок с большим содержимым.
        Первый блок с большим содержимым.
        Первый блок с большим содержимым.
        Первый блок с большим содержимым.
        Первый блок с большим содержимым.
        Первый блок с большим содержимым.
    </div>
    <div class="col-xs-4 td-xs two">
        Второй блок со средним содержимым.
        Второй блок со средним содержимым.
        Второй блок со средним содержимым.
    </div>
    <div class="col-xs-4 td-xs three">
        Третий блок с малым содержимым.
    </div>
</div>

Демо

Без Bootstrap Tables

Первый блок с большим содержимым. Первый блок с большим содержимым. Первый блок с большим содержимым. Первый блок с большим содержимым. Первый блок с большим содержимым. Первый блок с большим содержимым.
Второй блок со средним содержимым. Второй блок со средним содержимым. Второй блок со средним содержимым.
Третий блок с малым содержимым.

С применением Bootstrap Tables

Первый блок с большим содержимым. Первый блок с большим содержимым. Первый блок с большим содержимым. Первый блок с большим содержимым. Первый блок с большим содержимым. Первый блок с большим содержимым.
Второй блок со средним содержимым. Второй блок со средним содержимым. Второй блок со средним содержимым.
Третий блок с малым содержимым.