ProgramBox

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

Post author:admin
Запись опубликована:10 февраля, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть таблица, я пытаюсь сделать ее отзывчивой.

Когда я изменяю размер справа налево, он отлично сжимается

Находясь в маленьком окне, я нажимаю обновить и пытаюсь изменить его размер

Это то, что я сделал для CSS на данный момент

 @media only screen and (max-width: 1555px) {


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

}

@media only screen and (max-width: 1080px) {


    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }
}

@media only screen and (max-width: 840px) {


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }
}

Примечание: я пробовал это во всех типах браузеров: Chrome, Firefox, Safari, тот же результат.

Попробуйте #2

 @media (min-width: 1300px) and (max-width: 1555px) {

    th {
        color:brown;
    }

    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }
}


@media (min-width: 1200px) and (max-width: 1300px) {

    th {
        color:brown;
    }

    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

}


@media (min-width: 840px) and (max-width: 1200px) {

    th {
        color:red;
    }



    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }



}

@media (min-width: 520px) and (max-width:  840px) {


    th {
        color:orange;
    }


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }

}

@media (max-width: 520px) {


    th {
        color:yellow;
    }


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }

    td:nth-child(2),th:nth-child(2)  {
        display: none;
    }


}

Когда я расширяюсь, я все еще вижу эти пробелы сбоку

1. Можете ли вы использовать em или % для установки max-width s?

2. потому что ваши медиа-запросы заданы неправильно. вы также должны установить минимальную ширину, иначе применяется весь последний медиа-запрос, соответствующий правилу.

3. @HoldOffHunger: Хорошо, я могу попробовать это — надеюсь, получить лучший результат при ее расширении.

4. @tacoshy Хорошо. имеет смысл, позвольте мне добавить min-width также и повторить попытку.

5. @tacoshy Я попытался установить min-width подобное @media (min-width: 1300px) and (max-width: 1555px) { , но безуспешно;

Ответ №1:

Я бы посоветовал вам включить все данные таблицы ( td ) и заголовки таблицы ( th ) с помощью display: table-cell .

 @media (min-width: 1300px) and (max-width: 1555px) {

th, td { 
  display: table-cell;
} 

th {
    color:brown;
}

td:nth-child(9),th:nth-child(9)  {
    display: none;
}

td:nth-child(8),th:nth-child(8)  {
    display: none;
}
}


@media (min-width: 1200px) and (max-width: 1300px) {

th, td { 
  display: table-cell;
}

th {
    color:brown;
}

td:nth-child(9),th:nth-child(9)  {
    display: none;
}

td:nth-child(8),th:nth-child(8)  {
    display: none;
}

td:nth-child(7),th:nth-child(7)  {
    display: none;
}

}


@media (min-width: 840px) and (max-width: 1200px) {
    th, td { 
  display: table-cell;
}

    th {
        color:red;
    }



    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }



}

@media (min-width: 520px) and (max-width:  840px) {

    th, td { 
  display: table-cell;
}

    th {
        color:orange;
    }


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }

}

@media (max-width: 520px) {

    th, td { 
     display: table-cell;
    }

    th {
        color:yellow;
    }


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }

    td:nth-child(2),th:nth-child(2)  {
        display: none;
    }
    }

Показать фрагмент кода

 table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

@media (min-width: 520px) and (max-width:  840px) {

    th, td { 
  display: table-cell;
}

    th {
        color:orange;
    }


    td:nth-child(3),th:nth-child(3)  {
        display: none;
    }

}

@media (max-width: 520px) {

    th, td { 
     display: table-cell;
    }

    th {
        color:yellow;
    }

    td:nth-child(2),th:nth-child(2)  {
        display: none;
    }

    td:nth-child(3),th:nth-child(3)  {
        display: none;
    }    
}

 <h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

ИЛИ ссылка на скрипку JS

Ответ №2:

Когда вы выполняете перезагрузку и находитесь в окне наименьшего размера, для 2-го, 4-го, 5-го, 6-го, 7-го, 8-го и 9-го дочерних элементов установлено значение display: none.

При увеличении размера резервной копии ничто не сбрасывает ни одно из них для фактического отображения.

Итак, вам нужно что-то сделать с большими размерами носителей, чтобы они отображались при возврате.

Вот несколько идей о том, как сделать так, чтобы элементы отображались в больших размерах.

Пожалуйста, прочитайте комментарии, особенно о дочернем элементе 3 — он всегда виден? И я поставил display: block для отображения дочернего элемента, но у меня нет возможности узнать, является ли этот параметр нормальным для ваших элементов. Пожалуйста, замените на то, что подходит для вашего конкретного варианта использования.

 /* DONT FORGET WE NEED TO COPE WITH A WIDE SCREEN SO I'VE ADDED THIS */
    
    td:nth-child,th:nth-child  {
        display: block;
    }
    
/* we need to make sure that child 7 comes back into view */
@media (min-width: 1300px) and (max-width: 1555px) {

    th {
        color:brown;
    }

    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }
    
    td:nth-child(7),th:nth-child(7)  {
        display: block;
    }
}

/* at this, the 4th smallest, we need to make sure that child 6 comes back into view */
@media (min-width: 1200px) and (max-width: 1300px) {

    th {
        color:brown;
    }

    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }
    
    td:nth-child(6),th:nth-child(6)  {
        display: block;
    }

}

/* at this 3rd from smallest we need to make sure that child 5 comes back into view */
@media (min-width: 840px) and (max-width: 1200px) {

    th {
        color:red;
    }



    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }

    td:nth-child(5),th:nth-child(5)  {
        display: block;
    }

}
/* at the next to smallest the 4, 5, 6, 7 8, 9 children are display: none so we need to make sure that child 2 (and see comment below about child 3) is/are displayed */
@media (min-width: 520px) and (max-width:  840px) {


    th {
        color:orange;
    }


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }
    
    td:nth-child(2),th:nth-child(2)  {
        display: block;
    }
    td:nth-child(3),th:nth-child(3)  { /* just to be on the safe side */
        display: block;
    }
    td:nth-child(2),th:nth-child(2)  {
        display: block;
    }

}
/* when very small the 2, 4, 5, 6, 7, 8, 9 children are display: none. DID YOU MEAN TO KEEP CHILD 2 DISPLAYED? */
@media (max-width: 520px) {


    th {
        color:yellow;
    }


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }

    td:nth-child(2),th:nth-child(2)  {
        display: none;
    }

}

1. Вы видели мою попытку # 2? Я думаю, что я это уже сделал. Можете ли вы предложить 1 или 2 строки в качестве части вашего ответа?

2. Как можно написать CSS для этого? отображение при возврате. ?

3. Привет, да, я смотрел на вашу попытку 2. Вы добавили значение min, а также max, что является хорошим началом, но нигде вы на самом деле не устанавливаете отображаемый элемент, как только у него есть display:none, он никогда не выдает ничего другого, например display:block . Я не знаю, каковы ваши обычные настройки отображения для этих вещей — это просто значение по умолчанию (блок)? Я добавлю код к своему ответу и сообщу, правильно ли я угадал.

4. Я добавил немного CSS, но, пожалуйста, попробуйте и дайте мне знать, поскольку у меня нет возможности протестировать его по-настоящему.

5. Я все еще выгляжу очень напуганным, я попытаюсь собрать скрипку для этого и, возможно, спросить еще раз.

Ответ №3:

Для тех, кто хорошо разбирается в библиотеках, могу я сказать, что я настоятельно рекомендую DataTable Library. Оставьте проблемы CSS, динамического изменения размера и т. Д. В библиотеке.

Проверьте этот пример и попробуйте изменить размер панели консоли над ним: https://datatables.net/examples/basic_init/zero_configuration.html

Ответ №4:

Почему вы так сильно полагаетесь на td:nth-child(x) то, чтобы повлиять на повторное использование вашего кода, сделайте так, чтобы: даже если вы перемещаете столбцы, вам не нужно касаться вашего css.

Я бы предложил создать служебные классы и добавить эти классы в столбцы вашей таблицы.

например:

 .hidden-mobile 
@media (max-width: 450px) {
  display: none;
}

и так далее.
Если ваш HTML / Table недоступен, то, к сожалению, вам придется обращаться к нему через скрипт с использованием querySelector, влияющий на возможность повторного использования.

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

Вопрос:

Попробуйте #2

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

Ответ №1:

Ответ №2:

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

Ответ №3:

Ответ №4:

Вопрос:

Попробуйте #2

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

Ответ №1:

Ответ №2:

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

Ответ №3:

Ответ №4:

Вам также может понравиться

Перетасовка строк фрейма данных

ACL для участника в openldap

Найти минимальное количество узлов, которые могут обслуживать все мои элементы