精华内容
下载资源
问答
  • html表格去除网格线Previously I’ve shown HTML & CSS patterns for various kinds of tables, including designs with zebra stripes, rounded corners and scrolling data. Things get slightly more complex...

    html表格去除网格线

    Previously I’ve shown HTML & CSS patterns for various kinds of tables, including designs with zebra stripes, rounded corners and scrolling data. Things get slightly more complex when we turn to “data grids”: tables that feature headers for both column and row information.

    以前,我已经为各种显示了HTMLCSS模式,包括带有斑马条纹,圆角滚动数据的设计 。 当我们转向“数据网格”时,事情变得稍微复杂一些:表具有列和行信息的标题。

    For this example I’ll use technical specifications of the giant Jaeger fighting mechs in Guillermo del Toro’s Pacfic Rim because, well, why the heck not.

    在此示例中,我将使用吉列尔莫·德尔·托罗(Guillermo del Toro)的Pacfic Rim中巨型Jaeger战斗机的技术规格,因为,那么,为什么不这样做。

    A “data grid” table, as I define it, has headers for both rows and columns, with no visible cell in the top left corner. Like most challenges in web development, the key is employing the right markup, with tags that enhance accessibility:

    正如我定义的那样,“数据网格”表具有行和列的标题,左上角没有可见的单元格。 像网络开发中的大多数挑战一样,关键是采用正确的标记,并使用具有增强可访问性的标签:

    <table id="jaeger-specs">
    	<caption>Jaeger Technical Specifications</caption>
    	<thead>
    		<tr>
    			<th></th>
    			<th scope="col">Country
    			<th scope="col" >Height<span> (meters)</span> 
    			<th scope="col" >Weight (tonnes)</span>
    	</thead>
    	<tbody>
    		<tr>
    			<th scope="row">Gipsy Danger
    			<td>United States
    			<td>79
    			<td>1980
    		<tr>
    			<th scope="row" >Striker Eureka
    			<td>Australia
    			<td>76
    			<td>1850
    		<tr>
    			<th scope="row">Crimson Typhoon
    			<td>China
    			<td>76
    			<td>1722
    		<tr>
    			<th scope="row">Coyote Tango
    			<td>Japan
    			<td>86
    			<td>2312
    		<tr>
    			<th scope="row">Cherno Alpha
    			<td>Russia
    			<td>85
    			<td>2412
    	</tbody>
    </table>

    I am using scope to signify the role table header cells play – i.e. whether they are headers for rows or columns – together with HTML5 shortcuts. Note that despite the use of shortcuts the very first table header cell has a closing tag: this will prove important in applying the CSS to come.

    我正在使用scope来表示表头单元格所扮演的角色,即它们是行标题还是列头,以及HTML5快捷方式 。 请注意,尽管使用了快捷方式,但第一个表格标题单元格仍带有一个结束标记:这将在应用CSS时被证明很重要。

    The selectors I’m using in the stylesheet, which include :not and :empty, are deliberately advanced. It’s entirely possible to create this same table appearance using more traditional fare, such as classes, but my goal is to use the most efficient CSS code possible. A particular issue to avoid is doubling up of borders: you don’t want one cell wall in the table to appear thicker than the others due to a border on both it and a neighbouring element. To that end:

    我在样式表中使用的选择器(包括:not:empty )是有意改进的。 完全有可能使用更传统的方式(例如类)来创建相同的表格外观,但我的目标是使用尽可能高效的 CSS代码。 要避免的一个特殊问题是边框加倍:您不希望表中的一个单元格壁由于相邻单元格上都带有边框而显得比其他单元格更厚。 为此:

    #jaeger-specs {
    	border-collapse: collapse;
    	margin: 0 auto;
    }
    #jaeger-specs td,
    	#jaeger-specs th { 
    		text-align: center;
    		padding: 1rem;
    }
    #jaeger-specs th[scope] {
    	color: #fff;
    	background-color: #000;
    	font-weight: normal;
    }
    #jaeger-specs tbody { 
    	border: 1px solid #222;
    }
    #jaeger-specs tbody th,
    	#jaeger-specs tbody th + td { 
    		text-align: left;
    		font-weight: normal;
    }
    #jaeger-specs tbody th {
    	font-size: 1.4rem;
    	border-right: 1px solid #222;
    	background-size: cover;
    	font-family: Agency, sans-serif;
    	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    }

    The central body of the table has a border all the way around it. The table header cells for the rows and those immediately adjacent to them are left-aligned, with a border between them. The content of all other cells is centered.

    桌子的中央始终围绕着边框。 行和紧邻行的表标题单元格左对齐,并在它们之间加边框。 所有其他单元格的内容都居中。

    #jaeger-specs tbody tr:nth-child(1) th {
    	background: url(gipsy-danger.jpg);
    }
    #jaeger-specs tbody tr:nth-child(2) th {
    	background: url(striker-eureka.jpg);
    }
    #jaeger-specs tbody tr:nth-child(3) th {
    	background: url(crimson-typhoon.jpg);
    }
    #jaeger-specs tbody tr:nth-child(4) th {
    	background: url(coyote-tango.jpg);
    }
    #jaeger-specs tbody tr:nth-child(5) th {
    	background: url(cherno-alpha.jpg);
    }

    Rather than identifying each row with a class or id, I’m simply counting where it is in the body of the table to apply an appropriate background image. This has the advantage of keeping markup light, but contains the drawback that changing the order of the rows will mean a small rewrite of the CSS.

    我没有用classid标识每一行,而是简单地计算它在表主体中的位置以应用适当的背景图像。 这具有保持标记较少的优点,但是具有缺点,即更改行的顺序将意味着对CSS的少量重写。

    #jaeger-specs tbody tr:not(:last-child) {
    	border-bottom: 1px solid #222;
    }

    Every row in the table except the last one has a border on its bottom edge.

    表格中最后一行 ,每一行的底边都有边框。

    #jaeger-specs thead th[scope] { 
    	border: 1px solid #222;
    	border-bottom: none;
    }

    Every table header cell with a scope attribute has a border on all sides, with the border on the bottom cancelled with a separate rule.

    每个具有scope属性的表标题单元格的所有边都有边框,底部的边框被单独的规则取消。

    #jaeger-specs tbody td:not(:last-child) {
    	border-right: 1px solid #222;
    }
    #jaeger-specs tbody td { 
    	background: hsl(195, 100%, 30%);
    	color: #fff;
    }

    All the data cells in the table have a background color specified in HSL. Every cell, with the exception of the last in each row, has a border on its right side.

    表中的所有数据单元格均具有HSL中指定的背景色。 除了每行的最后一个单元格外,每个单元格的右侧都有边框。

    That’s a data grid, probably the most complex table most web designers will encounter in day-to-day development. It’s by no means the last thing we can do with tables, as you’ll see in articles to come.

    那是一个数据网格,可能是大多数Web设计人员在日常开发中会遇到的最复杂的表。 正如您将在以后的文章中看到的那样,这绝不是表可以做的最后一件事。

    翻译自: https://thenewcode.com/710/HTML-Table-Patterns-Data-Grids

    html表格去除网格线

    展开全文
  • 今天小编就为大家分享一篇pandas dataframe添加表格线输出的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 我们在使用EXCEL编辑好表格要打印的时候,EXCEL里的网格线默认为灰色,而且是只显示和不能打印的,只有加了边框线的单元格才能打印出来,没有设置边框线的打印出来的没有边框也没有网格线。如何将网格线也一起打印...

    我们在使用EXCEL编辑好表格要打印的时候,EXCEL里的网格线默认为灰色,而且是只显示和不能打印的,只有加了边框线的单元格才能打印出来,没有设置边框线的打印出来的没有边框也没有网格线。如何将网格线也一起打印出来呢,今天小编教大家一个方法:

    第一步、新建一个EXCEL表格,并录入数据在这里插入图片描述

    第二步、选中其中一部分添加边框线在这里插入图片描述
    效果如下,可以看到选中数据周边出现了黑色的框线在这里插入图片描述

    第三步、点击菜单栏左上角的“打印预览”在这里插入图片描述
    这时可以清楚看到,只有添加了边框线的才有网格线,没有添加的是没有网格线的在这里插入图片描述

    第四步、返回表格界面,在菜单栏选择“页面布局”,进入页面设置菜单栏在这里插入图片描述
    在页面设置区域右下角有个指向右下方的小箭头,点击在这里插入图片描述

    第五步、这时弹出页面设置对话框,点击进入“工作表”选项卡在这里插入图片描述
    在工作表选项卡的中间部分的“打印”板块中,勾选“网格线”选项,点击“确定”在这里插入图片描述

    第六步、这时再点击“打印预览”,就可以看到灰色的网格线也能打印出来了在这里插入图片描述

    以上就是如何打印网格线的方法,有没有感觉很简单呢!

    展开全文
  • grid()函数用于设置绘图区网格线。 grid()的函数签名为matplotlib.pyplot.grid(b=None, which='major', axis='both', **kwargs)。 grid()的参数如下: b:是否显示网格线。布尔值或None,可选参数。如果没有关键字...

    grid()函数概述

    grid()函数用于设置绘图区网格线。
    grid()的函数签名为matplotlib.pyplot.grid(b=None, which='major', axis='both', **kwargs)
    grid()的参数如下:

    • b:是否显示网格线。布尔值或None,可选参数。如果没有关键字参数,则bTrue,如果bNone且没有关键字参数,相当于切换网格线的可见性。
    • which:网格线显示的尺度。字符串,可选参数,取值范围为{'major', 'minor', 'both'},默认为'major''major'为主刻度、'minor'为次刻度。
    • axis:选择网格线显示的轴。字符串,可选参数,取值范围为{'both', 'x', 'y'},默认为’both’`。
    • **kwargsLine2D线条对象属性。

    grid()的返回值为None

    grid()函数演示

    在这里插入图片描述

    import matplotlib.pyplot as plt
    
    plt.subplot(341)
    # grid()默认样式
    plt.plot([1, 1])
    plt.grid()
    plt.annotate('grid()', (0, 1))
    plt.subplot(342)
    # 因为默认没有网格线,所以grid(None)显示网格线
    plt.plot([1, 1])
    plt.grid(None)
    plt.annotate('grid(None)', (0, 1))
    plt.subplot(343)
    # 因为设置了网格线,所以grid(None)切换为不显示网格线
    plt.plot([1, 1])
    plt.grid(True)
    plt.grid(None)
    plt.annotate('grid(None)', (0, 1))
    plt.subplot(344)
    # 因为默认没有网格线
    plt.plot([1, 1])
    plt.annotate("default", (0, 1))
    plt.subplot(345)
    # 只显示主刻度网格线
    plt.plot([1, 1])
    plt.grid(which='major')
    plt.annotate("which='major'", (0, 1))
    plt.subplot(346)
    # 只显示次刻度网格线,因为没有次刻度,所以无网格线
    plt.plot([1, 1])
    plt.grid(which='minor')
    plt.annotate("which='minor'", (0, 1))
    plt.subplot(347)
    # 同时显示主刻度、次刻度网格线
    plt.plot([1, 1])
    plt.grid(which='both')
    plt.annotate("which='both'", (0, 1))
    plt.subplot(348)
    plt.plot([1, 1])
    # 默认同时显示主刻度、次刻度网格线
    plt.grid()
    plt.annotate("default", (0, 1))
    plt.subplot(349)
    # 只显示x轴网格线
    plt.plot([1, 1])
    plt.grid(axis='x')
    plt.annotate("axis='x'", (0, 1))
    plt.subplot(3,4,10)
    # 只显示y轴网格线
    plt.plot([1, 1])
    plt.grid(axis='y')
    plt.annotate("axis='y'", (0, 1))
    plt.subplot(3,4,11)
    # 同时显示xy轴网格线
    plt.plot([1, 1])
    plt.grid(axis='both')
    plt.annotate("axis='both'", (0, 1))
    plt.subplot(3,4,12)
    # 默认显示xy轴网格线
    plt.plot([1, 1])
    plt.grid()
    plt.annotate("default", (0, 1))
    plt.show()
    
    

    原理

    pyplot.grid()其实调用的是gca().grid(),即Aexs.grid()

    底层相关函数有:
    Axis.grid()

    Axes.grid()源码(matplotlib/Axes/_base.py

    def grid(self, b=None, which='major', axis='both', **kwargs):
            cbook._check_in_list(['x', 'y', 'both'], axis=axis)
            if axis in ['x', 'both']:
                self.xaxis.grid(b, which=which, **kwargs)
            if axis in ['y', 'both']:
                self.yaxis.grid(b, which=which, **kwargs)
    

    xaxisXAxis类的实例,yaxisYAxis类的实例,XAxisYAxis类的基类为Axis

    Axis.grid()源码(matplotlib/axis.py

    def grid(self, b=None, which='major', **kwargs):
        if b is not None:
            if 'visible' in kwargs and bool(b) != bool(kwargs['visible']):
                raise ValueError(
                    "'b' and 'visible' specify inconsistent grid visibilities")
            if kwargs and not b:  # something false-like but not None
                cbook._warn_external('First parameter to grid() is false, '
                                     'but line properties are supplied. The '
                                     'grid will be enabled.')
                b = True
        which = which.lower()
        cbook._check_in_list(['major', 'minor', 'both'], which=which)
        gridkw = {'grid_' + item[0]: item[1] for item in kwargs.items()}
        if 'grid_visible' in gridkw:
            forced_visibility = True
            gridkw['gridOn'] = gridkw.pop('grid_visible')
        else:
            forced_visibility = False
    
        if which in ['minor', 'both']:
            if b is None and not forced_visibility:
                gridkw['gridOn'] = not self._minor_tick_kw['gridOn']
            elif b is not None:
                gridkw['gridOn'] = b
            self.set_tick_params(which='minor', **gridkw)
        if which in ['major', 'both']:
            if b is None and not forced_visibility:
                gridkw['gridOn'] = not self._major_tick_kw['gridOn']
            elif b is not None:
                gridkw['gridOn'] = b
            self.set_tick_params(which='major', **gridkw)
        self.stale = True
    
    展开全文
  • 主要介绍了jQuery插件echarts实现的去掉X轴、Y轴和网格线效果,结合实例形式分析了echarts插件绘制表格图及图形相关属性设置操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
  • 如何修改Excel表格中的网格线颜色.docx
  • 取消网格线 splitLine: { show: false } 以下属性对x轴,y轴均有效 取消坐标轴刻度线 axisTick: { show: false } 取消显示坐标值 axisLabel: { show: false } 取消显示坐标轴 axisLine: {...

    取消网格线

        splitLine: {
            show: false
        }

     

    以下属性对x轴,y轴均有效

     取消坐标轴刻度线

        axisTick: {
            show: false
        }

    取消显示坐标值

        axisLabel: {
            show: false
        }

    取消显示坐标轴

        axisLine: {
            show: false
        }

    取消显示坐标轴,坐标轴刻度,坐标值(如果是y轴,默认的网格线也会取消显示)

    show: false

    展开全文
  • 工作中经常需要使用到excel表格来帮助我们统计数据,制作表格等工作。但有时候遇到一些需要进行批量处理,或者是关于表格美观的设计问题等,有可能会导致我们...快速去除·表格网格线:为了使数据看起来更清晰,简...
  • WPF Grid绘制网格线

    千次阅读 2018-06-02 14:59:47
    //设置边框线的颜色 var border = new Border { BorderBrush = new SolidColorBrush((Color)color) }; if (row + rowspan == grid.RowDefinitions.Count && column + columnspan == grid.ColumnDefinitions....
  • 二、其他打印技巧 1、打印网格线 很多小伙伴会发现,我们在Excel中明明可以看到网格线,但是打印出来就没有,这是因为你没有进行设置,在【页面布局】——【网格线】中勾选【打印】选项即可。 2、打印标题行 在打印...
  • 使用GridView实现表格分割线效果,网格布局表格布局也是可以实现的。 效果如下: 1.主函数代码: package com.example.qd.douyinwu; import android.app.Activity; import android.content.Context; import ...
  • 个word文档的边框线不能保存,在网上查了一下都没有解决办法。我自己琢磨,现在问题已解决,把办法分享给大家。
  • 电子表格要怎么设置打印出来才会有网格线啊!.docx
  • 隐藏table网格线

    千次阅读 2013-08-01 00:54:18
    table{ border-collapse:collapse}
  • 导语:Excel表格默认的灰色框线叫网格线,用来区分单元格。但有时候在操作的过程中,Excel中的网格线不见了。如图所示:原因:单元格的内容较多,把部分网格线遮挡了解决方法:增大列宽把光标放在两列之间,直到光标...
  • WPF实战—让Grid的网格线显示出来

    千次阅读 2020-11-20 13:52:19
    2、网格线细节处理(重叠边线问题的解决) 二、主要思路: 将grid的子元素,套在一个border里面。控制border边框的显示形成网格线 三、 使用方法和案例: <Grid Height="120" Grid.Row="1" cui:...
  • wpf 带表格线的listview

    热门讨论 2014-11-18 19:53:57
    默认的listview不带表格线,这个实现的已经算是完美的了
  • Echarts隐藏背景的网格线

    千次阅读 2021-04-03 11:08:05
    网格线未处理之前,默认是这样的,这个背景的网格线,我们现在如果不需要,就去掉吧。 Echarts隐藏背景的网格线属性 yAxis: { splitLine: {show: false}, }, 示例代码: <!DOCTYPE html> <html> &...
  • 坐标轴在 grid 区域中的分隔线。 yAxis.splitLine.show boolean [ default: true ] 是否显示分隔线。默认数值轴显示,类目轴不显示。 yAxis.splitLine.interval number, Function [ default: 'auto' ] 坐标轴...
  • 我们知道Excel中有许多虚线形式的网格线,它们用于区分Excel工作表中的单元格。有了网格线,读者可以轻松地查看和核对工作表中的数据。Excel工作表中,网格线是默认存在的,但我们可以根据自身的需求来决定是要隐藏...
  • echarts设置网格线颜色

    万次阅读 2019-06-12 11:28:29
    设置网格线颜色 xAxis: { type: ‘value’, //设置网格线颜色 splitLine: { show: true, lineStyle:{ color: [’#315070’], width: 1, type: ‘solid’ }  } } 隐藏网格线 xAxis: { type: ‘value’, //隐藏网格线...
  • Swing Jtable 网格线设置

    2016-06-22 09:01:00
    Swing jtable不绘制网格线或只绘制一条垂直或水平线问题总结 1 不绘制网格线…但占屏幕空间…网格是透明的…. myJTable1.setShowHorizontalLines(false); 水平线不显示 myJTable1.setShowVerticalLines(false...
  • 今天就和大家聊聊PDF文件如何添加网格线,首先可能有些小伙伴们还不知道网格线是什么?网格线主要用于帮助用户将文档中的图形、图像、文本框等对象沿网格线对齐,并且在打印时网格线不会被打印出来。那在我们编辑PDF...
  • javafx表格lineChart开发,实现网格线设计 这是Nicole的第一篇博客,以后就在这里记录自己的成长史吧! 第一种方式 使用Series进行系列添加,每个系列都是两点绘制成一条线 for(int i=scale;i<=xAxis....
  • PowerDesigner如何去掉黑色网格线

    千次阅读 2017-02-24 12:38:15
    点击工具栏上的 Tools -> Display Preferences 菜单选项,在弹出的Display Preferences窗口去掉“Show page delimiter”(显示页面分隔符)选项即可。
  • datagridview的网格线如何隐藏

    千次阅读 2016-07-07 07:49:47
    dataGridView1.CellBorderStyle = DataGridViewCellBorderStyle.None;
  • ctrllist画网格线函数

    2009-12-13 10:57:41
    本人在使用ctrllist的时候,遇到这样一个问题,就是ctrllist(report型的)每行之间没有分割线,看起来不方便,后来经过研究发现有一个LVS_EX_GRIDLINES风格说是加网格线的,可在打印的时候就是不行,于是参考网上...
  • QTableWidget 1 设置某列不可编辑 QTableWidgetItem *item = new QTableWidgetItem("test"); item->setFlags(item->...2 设置表格禁止编辑 ui.tablewidget->setEditTriggers(QAbstract...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,738
精华内容 5,495
关键字:

如何取消表格网格线