Kivi_� 2021-03-01 18:35 采纳率: 0%
浏览 104
已结题

svelte的表格控件表格之间没分隔符号

大家好,我们的项目需要用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>
  • 写回答

4条回答 默认 最新

  • 歇歇 2021-03-01 19:28
    关注

    通过jquery的方式获取到每个单元格,内然后写css方法:容
    table.dataTable, .table>tbody>tr>td, .table>thead:first-child>tr:first-child>th{
    border:solid 1px ;

    }

    可以添加边框

    评论

报告相同问题?

悬赏问题

  • ¥15 机器学习教材中的例题询问
  • ¥15 求.net core 几款免费的pdf编辑器
  • ¥15 C# P/Invoke的效率问题
  • ¥20 thinkphp适配人大金仓问题
  • ¥20 Oracle替换.dbf文件后无法连接,如何解决?(相关搜索:数据库|死循环)
  • ¥15 数据库数据成问号了,前台查询正常,数据库查询是?号
  • ¥15 算法使用了tf-idf,用手肘图确定k值确定不了,第四轮廓系数又太小才有0.006088746097507285,如何解决?(相关搜索:数据处理)
  • ¥15 彩灯控制电路,会的加我QQ1482956179
  • ¥200 相机拍直接转存到电脑上 立拍立穿无线局域网传
  • ¥15 (关键词-电路设计)