vue中 table中的border
时间: 2023-11-27 18:53:07 浏览: 30
在 Vue 中,可以使用 CSS 来设置表格的边框。以下是一个简单的例子:
```html
<template>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
</template>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
```
在上面的代码中,我们使用了 `border-collapse: collapse;` 来指定表格边框的合并方式,并使用 `border: 1px solid #ddd;` 来设置每个单元格的边框样式。我们还使用了 `padding: 8px;` 来设置单元格内部的空白区域,以及 `text-align: left;` 来设置单元格中的文本对齐方式。最后,我们使用了 `background-color: #f2f2f2;` 来设置表头的背景颜色。
你可以根据自己的需要进行调整。希望能对你有所帮助!