Проверьте значение атрибута заголовка CSS пустым или нет - PullRequest
Новая
       6

Проверьте значение атрибута заголовка CSS пустым или нет

0 голосов
/ 19 ноября 2018

У меня есть такая таблица, и на рабочем столе все отлично. Вот HTML: 

<table class="responsive-table table-bordered ">
    <thead>
        <tr>
            <th scope="col">Title 1</th>
            <th scope="col">Title 2</th>
            <th scope="col">Title 3</th>
            <th scope="col">Title 4 </th>
            <th scope="col">Title 5</th>
            <th scope="col">Title 6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-title="Title 1:">
                <span>Some title</span>

            </td>
            <td data-title="Title 2:">60</td>
            <td data-title="Title 3">0</td>
            <td data-title="Title 4:">5.0</td>
            <td data-title="Title 5:">
                <button>Add</button>>

            </td>
            <td data-title="Title 6:"></td>
        </tr>

    </tbody>
</table>

Проблема в том, что когда я нахожусь на экране мобильного устройства, а значение не введено, оно портит мой макет, но когдаЯ положил что-то вроде - или.все отлично работаетВот картинка enter image description here

Есть ли решение, как это исправить?Проверить значение атрибута заголовка пусто или нет?Помогите пожалуйста

Также мой css: 

 td[data-title]:before {
    content: attr(data-title);
    float: left;
    font-size: 1em;
    color: rgba(94, 93, 82, 0.75);
}

1 Ответ

0 голосов
/ 19 ноября 2018

Попробуйте это: 

td[data-title]{ padding: 1rem; }

Настройте значение padding, которое вам нужно.

...