Адаптивная таблица с Bootstrap - пример html js css

Адаптивная таблица с Bootstrap (HTML код)

<h2>Responsive Table with Bootstrap</h2>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="table-responsive">
        <table summary="This table shows how to create responsive tables using Bootstrap's default functionality" class="table table-bordered table-hover">
          <caption class="text-center">An example of a responsive table based on <a href="https://getbootstrap.com/css/#tables-responsive" target="_blank">Bootstrap</a>:</caption>
              <th>Median Age</th>
              <th>Area (Km²)</th>
              <td>Spanish (official), English, Italian, German, French</td>
              <td>English 79%, native and other languages</td>
              <td>Greek 99% (official), English, French</td>
              <td>Luxermbourgish (national) French, German (both administrative)</td>
              <td>Russian, others</td>
              <td>Swedish, small Sami- and Finnish-speaking minorities</td>
              <td colspan="5" class="text-center">Data retrieved from <a href="http://www.infoplease.com/ipa/A0855611.html" target="_blank">infoplease</a> and <a href="http://www.worldometers.info/world-population/population-by-country/" target="_blank">worldometers</a>.</td>
      </div><!--end of .table-responsive-->

<p class="p">Demo by George Martsoukos. <a href="http://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions" target="_blank">See article</a>.</p>

Адаптивная таблица с Bootstrap (CSS код)

h2 {
  text-align: center;

table caption {
	padding: .5em 0;

@media screen and (max-width: 767px) {
  table caption {
    border-bottom: 1px solid #ddd;

.p {
  text-align: center;
  padding-top: 140px;
  font-size: 14px;

Адаптивная таблица с Bootstrap (JS код)

// See:
// http://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions
//# sourceURL=pen.js

Адаптивная таблица с Bootstrap (Результат кода)

116   0  
    Ничего не найдено.

Добавить ответ: