Отзывчивый дисплей таблицы - PullRequest
Новая
       6

Отзывчивый дисплей таблицы

0 голосов
/ 18 октября 2018

Я пытаюсь сделать отображение таблицы более отзывчивым.Я попытался использовать метод CSS-хитрости (https://css -tricks.com / respive-data-tables / ) для двухколоночного макета и получил его для работы по большей части, но мойПроблема заключается в том, что столбцы, которые занимают несколько строк, не повторяются в мобильном представлении и приводят к неправильному выравниванию псевдозаголовок.

Вот репликация используемого мной HTML-кода: 

<table>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

И CSS: 

<style>

@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px)  {

    table, thead, tbody, th, td, tr { 
    display: block; 
    }

    th {
    color: #ffffff;
    font-weight: bold;
    }

    thead tr{
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    td {
        border: none;
        border-bottom: 1px solid rgb(221, 221, 221);
        position: relative;
        padding-left: 30%;
        text-align: left;
        white-space: normal;
    }       

    td:before { 
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: normal;
    }

    td:nth-of-type(1):before { content: "A"; }
    td:nth-of-type(2):before { content: "B"; }
    td:nth-of-type(3):before { content: "C"; }
    td:nth-of-type(4):before { content: "D"; }
    td:nth-of-type(5):before { content: "E"; }
    }
}

В мобильном представлении создаваемый «заголовок» не совпадает с данными, то есть столбцом «A»данные должны быть "1"

Ответы [ 2 ]

0 голосов
/ 18 октября 2018 

.dn {
  display: none;
}


@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px)  {

    table, thead, tbody, th, td, tr { 
    display: block; 
    }

    th {
    color: #ffffff;
    font-weight: bold;
    }

    thead tr{
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    td {
        border: none;
        border-bottom: 1px solid rgb(221, 221, 221);
        position: relative;
        padding-left: 30%;
        text-align: left;
        white-space: normal;
    }       

    td:before { 
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: normal;
    }

    td:nth-of-type(1):before { content: "A"; }
    td:nth-of-type(2):before { content: "B"; }
    td:nth-of-type(3):before { content: "C"; }
    td:nth-of-type(4):before { content: "D"; }
    td:nth-of-type(5):before { content: "E"; }
    }
}
<table>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td class='dn'>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </tbody>
</table>
0 голосов
/ 18 октября 2018

Я думаю, что атрибут [rowspan = "2"] может вызвать у вас проблемы.

На третьем теге "tr" тега "tbody" отсутствует столбец.

Извините, мой плохойанглийский.

...