Блог

Главная - Вопросы по программированию - Как сделать таблицу отзывчивой

Как сделать таблицу отзывчивой

#html #css #html-table #responsive

#HTML #css #html-таблица #отзывчивый

Вопрос:

У меня есть некоторая таблица, и я хочу сделать ее отзывчивой, когда она отображается шириной не более 760.

Эта таблица выглядит нормально :

введите описание изображения здесь

И я хочу сделать это так, если ширина экрана не более 760 :

введите описание изображения здесь

В этой таблице последний столбец просто появляется в конце таблицы, а не в каждой строке.

Кто-нибудь может мне помочь в этом?

Комментарии:

1. Привет, вместо таблицы используйте ul li. Потому что это поддерживается не во всех браузерах.

2. не могли бы вы использовать bootstrap. этот фреймворк поможет вам создать адаптивную страницу.

3. вы можете попробовать это sitesforprofit.com/responsive-tables-in-wordpress

4. Да, я уже провел некоторое исследование с помощью bootstrap, но он просто дает мне таблицу с горизонтальной прокруткой и не может выглядеть так, как я хочу. @esprittn

5. взгляните на этот URL. это может вам помочь: elvery.net/demo/responsive-tables

Ответ №1:

Используйте этот код html и css для создания таблицы, отвечающей на запросы

Проверьте фрагменты ниже.

  • Используйте этот css с максимальной шириной медиа-запроса: 760 пикселей или любой шириной

 .responsive-table {
    margin:0px auto;
    width:500px;
	border: 1px solid #efebeb;
  
  }
  
  .responsive-table img{height:100px; }
  
  .responsive-table th {
    display: none;
  }
  
  .responsive-table td {
    display: block;
	border-top: 1px solid #ddd;
  }
  .responsive-table td:first-child{border:none;}
  .responsive-table td:first-child {
    padding-top: .5em;
  }
  .responsive-table td:last-child {
    padding-bottom: .5em;
  }
  .responsive-table td:before {
    content: attr(data-th) ": ";
    display:block;
	font-weight:bold;
  }  
 <table class="responsive-table">
    <tbody>
        <tr>
            <th>
                Room
            </th>
            <th>
                Guest
            </th>
            <th>
                Description
            </th>
            <th>
                Rate
            </th>
            <th>
                Book
            </th>
        </tr>
        <tr>
            <td data-th="Room">
                <img src="http://i45.tinypic.com/t9ffkm.jpg" alt="" />
            </td>
            <td data-th="Guest">
                2 adult
            </td>
            <td data-th="Description">
                Room Only

            </td>
            <td data-th="Rate">
                USD 200

            </td>
            <td data-th="Book">
                <button type="submit"> Book</button>
            </td>
        </tr>
    </tbody>
</table>

Ответ №2:

Я написал функцию js, чтобы сделать таблицу отзывчивой. Вы можете установить точку останова и тег таблицы или имя класса css в качестве параметров.

     const makeTableResponsive = (mq, t) => {
    var q = window.matchMedia(mq);
    if (q.matches) {
        let headings = [];
        let tables = document.querySelectorAll(t);
        if (tables amp;amp; tables.length > 0) {
            tables.forEach(table => {
                let thead = table.querySelector("thead");
                let headingTags = thead.querySelectorAll("th");
                let tbody = table.querySelector("tbody");
                let tbodies = tbody.querySelectorAll("tr");
    
                tbody.style.display = "block";
                thead.style.display = "none";
    
                headingTags.forEach((th) => {
                    th.style.display = "block";
                    headings.push(th.innerText);
                });
    
                tbodies.forEach((tr) => {
                    let trstyle = tr.style;
                    trstyle.display = "block";
                    trstyle.border = "1px solid #ccc";
                    trstyle.marginBottom = "30px";
    
                    let tds = tr.querySelectorAll("td");
                    tds.forEach((td, i) => {
                        td.style.display = "flex";
                        td.style.flexDirection = "row-reverse";
                        td.style.justifyContent = "space-between";
                        td.innerHTML  = `<span class="font-weight-bold text-primary">${headings[i]}</span>`;
                    });
                });
            })
        }
    }
};


makeTableResponsive('(max-width: 992px)', 'table');