Kivi177
Kivi_�
采纳率0%
2021-03-01 18:35

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

66

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

  • showbo GoCityPass新加坡曼谷通票 1月前

    导入下面的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>
    点赞 评论 复制链接分享
  • weixin_41908433 知雀的天空 1月前
    <style>
    	table.dataTable, .table>tbody>tr>td, .table>thead:first-child>tr:first-child>th{
            border:solid 1px ;
           
    }
    </style>

    在style中添加以上代码 

    点赞 评论 复制链接分享
  • bill20100829 歇歇 1月前

    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,右边框。

    点赞 评论 复制链接分享
  • bill20100829 歇歇 1月前

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

    }

    可以添加边框

    点赞 评论 复制链接分享