У меня проблема с перезаписывающейся записью в ячейке адаптивной ячейки таблицы - PullRequest
Новая
       67

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

0 голосов
/ 30 января 2020

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

Обычный просмотр таблицы Normal Table View

Мобильный просмотр таблицы
Mobile Table View

Вот мой html: 

<div id="card">
    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th>Date</th><th>User</th><th>Description</th><th>Text</th>
            </tr>
        </thead>
        <tbody>
           <tr>
             <td data-label="Date">2020-01-23 14:29:14</td><td data-label="User">Lylellen Hederstrom</td>
             <td data-label="Desc">Owner Contact Information</td>
             <td data-label="Text ">This code is owned by ZP Growers.  3824 Sunset Dr. Fallbrook, CA 92028</td>
          </tr>
          <tr>
            <td data-label="Date">2020-01-28 15:41:26</td><td data-label="User">Lyle Kafader</td>
            <td data-label="Desc">ZP Growers Purchase</td>
            <td data-label="Text ">October 2014, $2500, TractorsPlus, Phoenix AZ.  This is the story of bringing the tractor back to Valley Center.  I had to borrow Riley&#039;s truck because my little Nissan could not haul a big enough trailer.  The trailer that I rented didn&#039;t have sway bars which made for a very exciting trip through a windy desert.</td>
        </tr>
    </tbody>
</table>
</div>

Here is my CSS: 

@media screen and (max-width: 760px) {
    #card table {
        border: 0;
        table-layout: fixed;
        width: 95%;
    }

    #card table thead {
        display: none;
    }

    #card table tr {
        margin-bottom: 20px;
        dispaly: block;
        border-bottom: 2px solid #ddd;
        box-shadow: 2px 2px 1px #dadada;
        height: auto;
    }

    #card table td {
        display: block;
        text-align: right;
        font-size: 13px;
        height: 100%;
        width: 100%;
        word-wrap: break-word;
    }

    #card table td::before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
    }

    #card tbody {
        line-height:0!important;
    }
}
...