检查CSS标题属性值是否为空

Question

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

问题是当我在移动屏幕上且未输入值时，它弄乱了我的布局，但是当我放置-或时。一切正常。这是图片

有什么解决方案可以解决此问题吗？检查标题属性值是否为空？请帮助

我的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的值。