html - 检查 CSS title 属性值是否为空

Question

我有一张这样的 table ，在桌面上一切正常 这是 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>

问题是当我在移动屏幕上并且没有输入值时，它破坏了我的布局，但是当我输入类似 - 或 .一切正常。这是图片

有什么解决办法吗？检查title属性值是否为空？请帮忙

另外我的 CSS 是:

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

Answer 1

试试这个:

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

调整你需要的padding的值。