大家好，我们的项目需要用svelte把数据通过网页的形式进行展示，我们目前用的表格控件在实际应用的过程中出现了数据只见没有分隔，美观度不佳的问题。请问大家有没有推荐的svelte表格控件，可以解决我们的这个问题。或看看我们目前所用的控件代码应该怎么去做修改。
目前，网页运行后的表格的效果：
https://drive.google.com/file/d/1eIDs16X2oh5KgLDTDzkPV69wFodCxHIT/view?usp=sharing
<svelte:head>
<title>DataTable</title>
</svelte:head>
<script>
export let data
import { Datatable, rows} from 'svelte-simple-datatables'
import {range} from './range.js';
import { onDestroy } from 'svelte';
import { createEventDispatcher } from 'svelte';
const settings = { columnFilter: false, sortable: false, }
const dispatch = createEventDispatcher();
function dataTableUpdate() {
dispatch('dataTableUpdate', {
dataTableUpdate: true
})
}
onDestroy(() => {
dataTableUpdate();
});
</script>
<Datatable {settings} {data}>
<thead>
<th>Nr.</th>
{#each range(1,data[0].length+1,1) as i}
<th>{i}</th>
{/each}
</thead>
<tbody>
{#if (data.length > 0 && data[0].length > 0)}
{#each range(1,$rows.length+1,1) as j}
<tr>
<td>{j}</td>
{#each $rows[j-1] as cell}
<td>{cell}</td>
{/each}
</tr>
{/each}
{/if}
</tbody>
</Datatable>
<style>
td{
text-align:center;
padding:4px 0;
border-right: 1px black;
}
</style>通过jquery的方式获取到每个单元格，内然后写css方法：容
table.dataTable, .table>tbody>tr>td, .table>thead:first-child>tr:first-child>th{
border:solid 1px ;
}
可以添加边框
border-style 。这样：border:solid。
知识详bai解：
border-style 属性用du于设置元素所有边zhi框的样式，或者单独地为dao各边设置边框样式。zhuan
只有当这个值不shu是 none 时边框才可能出现（就是说，不要none属性，none是不显示的意思）。
border有多个边框属性：“颜色、宽度、样式。”
而你说的是样式：譬如“dotted solid double dashed。”
这四个分别是“点状线、实线、双线、虚线。”
直接用：border是上下左右都使用样式。
border-top，上边框。
border-bottom，下边框。
border-left，左边框。
border-right，右边框。
<style>
table.dataTable, .table>tbody>tr>td, .table>thead:first-child>tr:first-child>th{
border:solid 1px ;
}
</style>在style中添加以上代码
导入下面的css，自己看下效果改下配色
<!--CSS开始-->
<style>
table{border-collapse:collapse;border-radius:5px}
table td,table th{border:solid 1px #ccc}
table th{background:#f1f1f1}
table tbody tr:nth-child(2n+1){background:#f5f5f5}
</style>
<!--CSS介结束-->
<table class="svelte-udk322">
<thead>
<tr>
<th data-key="first_name">First Name</th>
<th data-key="last_name">Last Name</th>
<th data-key="email">Email</th>
</tr>
</thead>
<tbody><tr><td class="svelte-pj9zb4" style="min-width: 140px; max-width: 140px;">Tobie</td> <td class="svelte-pj9zb4" style="min-width: 150px; max-width: 150px;">Vint</td> <td class="svelte-pj9zb4" style="min-width: 408px; max-width: 408px;">tvint0@fotki.com</td> </tr><tr><td class="svelte-pj9zb4">Zacharias</td> <td class="svelte-pj9zb4">Cerman</td> <td class="svelte-pj9zb4">zcerman1@sciencedirect.com</td> </tr><tr><td class="svelte-pj9zb4">Gerianna</td> <td class="svelte-pj9zb4">Bunn</td> <td class="svelte-pj9zb4">gbunn2@foxnews.com</td> </tr><tr><td class="svelte-pj9zb4">Bee</td> <td class="svelte-pj9zb4">Saurin</td> <td class="svelte-pj9zb4">bsaurin3@live.com</td> </tr><tr><td class="svelte-pj9zb4">Meyer</td> <td class="svelte-pj9zb4">Garnul</td> <td class="svelte-pj9zb4">mgarnul4@yellowbook.com</td> </tr><tr><td class="svelte-pj9zb4">Frederich</td> <td class="svelte-pj9zb4">Benley</td> <td class="svelte-pj9zb4">fbenley5@ameblo.jp</td> </tr></tbody>
</table>