Question

我正在尝试在表格中添加一些表格行间距。但是我没有太大的成功。当我检查页面时，可以看到自己的样式，并且样式没有被划掉。关于为什么我不能在桌子上加上样式的任何想法？我已经彻底阅读了其他一些强加CSS的vuetify帖子，但没有成功。有什么想法吗？

样式：

<!DOCTYPE html>
<html>

<head>
    <title>Service Center - Google Maps Distance Search</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
    <div class="container-sm mt-3">
        <form class="form mb-3" id="form">
            <div class="search">
                <div class="card-body">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Patient Destination</span>
                        </div>
                        <input class="form-control" type="text" placeholder="Enter Zip Code" class="patientaddress" id="patientaddress">
                        <div class=" input-group-prepend ">
                            <span class="input-group-text " id="message "></span>
                        </div>
                    </div>
                    <hr>
                    <button class="btn btn-primary mt-2 " type="submit " id="submit ">Submit</button>
                    <button class="btn btn-outline-success mt-2 ml-3 " type="reset " value="Reset " id="refresh">Clear Destination</button>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript " src="main.js "></script>
</body>

</html>

控制台照片

数据表代码

`<style scoped>
    >>>tr {
        border-spacing: 10px;
        border:none;
    }

</style>`

Answer 1

您应将border-spacing应用于table，而不是tr。还需要具有border-collapse: separate;才能起作用。通常，它默认设置为separate，但不确定vuetify是否会覆盖它

>>> table {
  border-spacing: 10px;
  border-collapse: separate;
}

至于border: none，我怀疑它是在td级别设置的。因此，如果您想影响该样式，请执行以下操作：

>>> table td {
  border: none;
}

带有Vuetify V数据表的CSS

1 个答案: