精华内容
下载资源
问答
  • 本文讨论了csdn markdown编辑器 表格使用说明及不能调整宽度等问题处理。我们可以通过使用在markdown编辑器直接插入html片段,比如<table>代替编辑器表格,或根据css计算列宽原理实现表格列宽调整。...

    1、问题描述

    参考CSDN markdown编辑器官方帮助,表格使用方法如下:

    表格

    项目 Value
    电脑 $1600
    手机 $12
    导管 $1
    Column 1 Column 2 Column 3
    left-aligned 文本居左 centered 文本居中 right-aligned 文本居右

    这里我们能调整的只有对齐方式:
    1)冒号在左,左对齐
    2)没有冒号或冒号在两侧,居中对齐
    3)冒号在右侧,右对齐

    总体感觉csdn markdown编辑器提供的表格处理,简洁大方,书写也比较方便,但是欠缺一个关键功能,列宽指定(定宽或百分比),网上有很多博文关于这个问题讨论,但是没有特别好的方案,基本上就2个解决方案:
    1)直接用内嵌html,在markdown编辑器直接插入html片段,如:<table>...</table>
    2)有人曾提到使用style,如下:

    table th:first-of-type {
    	width: 200px;
    }
    

    方案1:可以解决问题,但不建议,如果使用内嵌html就牺牲了markdown的编辑效率;
    方案2:不能解决问题,csdn的markdown编辑器不支持,因为csdn markdown编辑器支持内嵌html(包括html里的内连style),但是不支持内嵌style <style>...</style>

    2、表格宽度或其它表格样式问题如何处理?

    第一个方案:上文已经提及,使用内嵌html表格代替markdown编辑器表格
    此方案虽说效率低下,且使用人员需要精通html基础知识,门槛略高,却足够灵活,也可以切实解决表格列宽问题。

    第二哥方案:投机取巧,通过调整标题列内容实现个别列宽度调整
    css在自动计算列宽的时候,会因为列的内容不同导致宽度不同,比如:“caching table” 和 “cachingtable”,前者css可以认为是2个单词可以换行,所以计算宽度就可以小点,而 "cachingtable"css认为其是一个单词不能换行,因此宽度大点才可以显示,根据这个原理我们可以调整标题行列内容,实现列宽适当调整。
    调整前截图:
    在这里插入图片描述
    调整后截图(###state###):
    在这里插入图片描述

    3、理想的解决方案

    1)希望csdn markdown编辑器支持内嵌<style>...</style>
    2)或希望csdn markdown编辑器table语法支持宽度指定,可以如下:
    |:-------w90|:--------:w80p| -------------:w100|
    在最后增加宽度设置,w90表示指定90px,w80p表示指定百分比80%,没指定的剩余宽度分摊。

    展开全文
  • (左边图锁定了行头与头,右边图仅锁定头)有许多的锁定或固定html表格表头的方法和技术,本文介绍的是一个基于IE和css的简易实现方法,基本思路为:使用div行级元素确定一个包含表格的区域,在区域滚动移动时...

    (左边图锁定了行头与列头,右边图仅锁定列头)
    有许多的锁定或固定html表格表头的方法和技术,本文介绍的是一个基于IE和css的简易实现方法,基本思路为:使用div行级元素确定一个包含表格的区域,在区域滚动移动时定位非固定单元格的位置(top/left)。

    1、确定表格区域

    定义一个有边框的div元素,并设置其overfloaw属性为scroll,保证该区域恒有一个垂直与水平滚动条。
    div#DivContainer
    {
        overflow: scroll; border: solid 1px gray;
    }

    在div中嵌入一个表格,设置collapse属性为collapse,满足单边框(合并边框)的外观。

    table
    {
        border-collapse: collapse;
    }

    2、单元格锁定选择器类

    需要设计三种类型的锁定单元格:垂直方向锁定单元格(VLocked)、水平方向锁定单元格(HLocked)及双向锁定单元格(Locked),而一般表格内容单元格则设置其位置属性position为relative,见如下css代码:
    td
    {
        position: relative; padding: 5px; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
    }

    锁定表格行头时,要求行头的单元格水平方不移动,即区域移动时重定位这些行头单元格的left边界值,见如下css代码:

    td.HLocked /* 水平方向锁住单元格 */
    {
        z-index: 10; position: relative; left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
        background-color: #cccccc; text-align: center; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
    }

     

    td.VLocked /* 垂直方向锁住单元格 */
    {
        z-index: 20; position: relative; top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop); font-size: 10pt; color: black; background-color: #cccccc; text-align: center; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
    }

    另一种是锁定行头单元格时,这些是行头又是列头的单元格必须双向锁定,见如下css代码:

    td.Locked
    {
        z-index: 30; position: relative; top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop); left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); font-size: 10pt; color: black; background-color: #cccccc; text-align: center; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
    }

    需要指出,表格td元素的parentNode元素是tr,tr.parentNode元素是tbody,tbody.parentNode元素是table,所以td.parentNode.parentNode.parentNode.parentNode是定制的div元素,即当前表格区域。
    锁定表格列头时,需要考虑两种情况单元格。一种是不锁定行头的单元格,此时只需要垂直方向不移动即可,见如下css代码:

     

    还有两点需要说明:
    1. 使用了z-index坐标,并且是Locked类选择器的z-index值最大,即最靠近浏览者;
    2. 在aspx中使用时,需要删除Visual Studio自动产生的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">行。
    下面是完整的css代码和htm演示代码,测试时需要建立一个IIS虚拟路径,拷贝css文件和htm文件到该虚拟路径中,然后通过浏览器浏览htm文件:

    展开全文
  • LaTeX表格绘制方法备忘一

    千次阅读 2019-01-13 11:08:38
      这里把自己用到的表格绘制方法做一些记录,免得以后要用的时候又到处去找。这份博客的内容会随着我在工作中使用表格的经历而变化,所以如果你看到的是转载的,最好还是来CSDN上看原文,因为内容可能已经不一样。...

      这里把自己用到的表格绘制方法做一些记录,免得以后要用的时候又到处去找。

    使用环境

    • 操作系统:Ubuntu 16.04 64位桌面版
    • LaTeX工具:TeXstudio 2.10.8
    • 编译方式:LuaLaTeX

    1、绘制固定列宽度、指定列对齐方式的表格

      
    完整代码如下:

    \documentclass{book}
    %
    \usepackage{ctex}
    \usepackage{geometry}
    \usepackage{booktabs}
    \usepackage{tabularx}
    %
    \geometry{a4paper, left = 3.17cm, right = 3.17cm, top = 2.54cm, bottom = 2.54cm}
    %
    \newcolumntype{L}[1]{>{\raggedright\arraybackslash}p{#1}}
    \newcolumntype{C}[1]{>{\centering\arraybackslash}p{#1}}
    \newcolumntype{R}[1]{>{\raggedleft\arraybackslash}p{#1}}
    %
    \setlength{\parindent}{0pt}
    %
    \begin{document}
    %
    %
    \heiti\centerline{表1-1 因程序设计语言或编译技术而获图灵奖的科学家}\songti
    \begin{tabular}{R{1cm}|C{3cm}|L{10cm}}
    \bottomrule[2pt]
    年份 & 获奖者 & 获奖原因\\
    \specialrule{2pt}{0pt}{0pt}
    1966 & Alan J. Perlis & 先进编程技术和编译架构方面的贡献\\
    \hline
    1971 & John McCarthy & Lisp语言、程序语义、程序理论、人工智能方面的贡献\\
    \hline
    1972 & E. W. Dijkstra & 对开发Algol做出了原理性贡献\\
    \hline
    1977 & John Backus & 在高级语言方面所做出的具有广泛和深远意义的贡献,特别是在Fortran语言方面\\
    \toprule[2pt]
    \end{tabular}
    %
    \end{document}
    

    效果如下:
    在这里插入图片描述
    说明:

    1. 每列的宽度由“\begin{tabular}{R{1cm}|C{3cm}|L{10cm}}”中的尺寸决定;
    2. 三行\newcolumntype语句定义了三种对齐方式,只是左对齐似乎没有必要设置,因为系统默认就是左对齐。要注意的是LaTeX的命令是大小写敏感的,别把其中大写的C打成小写的c了。定义对齐命令中包含的命令来自tabularx宏包。
    3. 这份例子中顺带使用了宏包booktabs,代码中的\bottomrule[2pt]、\specialrule{2pt}{0pt}{0pt}与\toprule[2pt]就来自这个宏包,效果大家也看见了。要注意的是我们是在表格顶部使用\bottomrule[2pt],而不是使用\toprule,否则会存在缝隙。本来booktabs中还提供了\midrule命令,但这个命令同样会产生缝隙,所以我才使用\specialrule{2pt}{0pt}{0pt}命令,其中第1个参数是线条的粗细,第2个是上方的间隙、第3个是下方的间隙。
    4. 这份代码我是在LuaLaTeX编译方式下写的,所以使用了ctex宏包来支持汉字显示。ctex为我们提供了一些默认的字体命令,包括\songti、\heiti、\kaishu、\lishu与\youyuan,名字一看大家就明白是哪些字体。
        

    2、绘制一行多列合并表格

      
    代码如下,导言区与上一例相同,不再列出。

    \begin{center}
      \heiti 表1-4 Neo Pascal基本数据类型\songti\small\\
      \begin{tabular}{C{1.9cm}|C{2.1cm}|c|C{1.6cm}|C{2.8cm}|c}
        \bottomrule[2pt]
        \multicolumn{3}{c|}{整型} & \multicolumn{3}{c}{实型}\\
        \hline
        BYTE & unsigned char & 单字节无符号整型 & SINGLE & float & 单精度型\\
        \hline
        WORD & unsigned short & 双字节无符号整型 & REAL & double & 双精度型\\
        \hline
        LONGINT & unsigned int &  四字节无符号整型 & \multicolumn{3}{c}{字符型}\\
        \hline
        CARDINAL & unsigned int & 四字节无符号整型 & CHAR & char & 字符型\\
        \hline
        SHORTINT & char & 单字节有符号整型 & \multicolumn{3}{c}{布尔型}\\
        \hline
        SMALLINT & short & 双字节有符号整型 & BOOLEAN & C++的bool & 布尔型\\
        \hline
        INTEGER & int & 四字节有符号整型 & \multicolumn{3}{c}{字符串型}\\
        \hline
        & & & STRING & 类似C的char* & 字符串型\\
      \toprule[2pt]
      \end{tabular}
    \end{center}
    

    效果如下:
    多列合并表格
      代码表达得已经很清楚,不再说明。

    展开全文
  • Antd表格之行/合并

    万次阅读 热门讨论 2019-03-05 19:25:19
    Antd--表格之行/合并 注意:antd官方行/合并参考:https://1x.ant.design/components/table/#components-table-demo-colspan-rowspan 表格行/合并 表头只支持合并,使用 column 里的 colSpan 进行设置。 ...

    Antd--表格之行/列合并

    注意:antd官方行/列合并参考:https://1x.ant.design/components/table/#components-table-demo-colspan-rowspan, 感觉网上大多是直接复制的antd代码。大家可以从这个链接,直到antd,或者您可以搜素antd官网进行查看

    在这里插入图片描述
    表格行/列合并
    表头只支持列合并,使用 column 里的 colSpan 进行设置。
    表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。
    合并关键词:rowSpan[行合并] colSpan[列合并]
    以上是Antd原展示,以及说明,这里大家可以直接跳转上面的连接查看相关说明。


    我遇到的问题是:对于可编辑表格的数据合并。
    1.如何处理表格可编辑。
    2.如何标记编辑了哪一行[特别是跨行的时候]
    3.提交数据【数据保存】
    问题1解决:如何处理表格可编辑
    其实如果你留意antd说明,你大概就知道了,antd中对于数据每一列,有一个render方法

    onst columns = [{
      title: '姓名',
      dataIndex: 'name',
      render(text, row, index) {                     	// *** 1:关键就是这个render方法 ***
        if (index < 4) { return <a href="#">{text}</a>;  }
        return {
          children: <a href="#">{text}</a>, 			 //*** 2:可编辑关键就是这个 
          props: {  colSpan: 5,  },                 	 // *** 3:合并行列关键
        };
      },
    }]
    

    注释1:表明我们可以通过这个方法任意扩展,需要的业务逻辑
    注释2:表明我们可以返回任意的htm标签【当然包括input类,以及自己封装的组件】
    注释3:这个对象我们可以设置colSpan,rowSpan用来合并行列【跨列,跨行】

    在这里插入图片描述
    代码实现【部分】:

     const columns = [
                {
                    title: <span> "节点名称"</span>,
                    dataIndex: "nodename", 
                    render(value, row, index) {  return that.fnGetRowSpanMerge(row, index, <span>{value}</span>);    },
                },
                {
                    title: <span> "节点前附加操作"</span>,
                    dataIndex: "action_node_pre", 
                    render(value, row, index) {
                        return that.fnGetRowSpanMerge(row, index, that.fnGetBrowBtn(row, getLabel(388414, "契约锁") + "action", "action_node_pre", true, false));
                    },
                }]
    
      /**  获取行并信息 @value 文本值 @row 整行的数据 @index 行下标 @children ta的数据格式具体 @ishow 是否显示空数据  */
        fnGetRowSpanMerge = (row, index, children, ishow) => {//这个方法用来跨行跨列
            const obj = {
                props: {rowSpan: 1,},
                children: children,
            }
            if (row.linksize > 1 && !ishow) {//包含跨行,且不显示多行相同数据
                obj.props.rowSpan = row.rowspan;
            } 
            return obj;
        }
      /** * 获取浏览按钮的信息  @param row 行信息 @param title 浏览框title  @param id 数据源id @param isnode 是否是节点  @param islink 是否是出口  @returns {*}  */
        fnGetBrowBtn = (row, title, id, isnode, islink) => {//通过该方法返回表格数据, 可以是check,select, input,以及封装的组件
            let replacedatas = toJS(row[id + "rep"]);
            return (<WeaBrowser onChange={()=>{xxx}}/>);//目前是自己封装的组件   注意onchange时间
         }
    

    问题2解决:如何标记编辑了哪一行[特别是夸行的时候]
    主要利用解决问题1时预留的onchange事件进行修改数据。
    这里注意一点:既然你在合并这几行。那么标志着你不关心这些行,或者这些行数据一直。那么我们可以管理整个表单的数据,使这些行数据数据相同即可,

    /**
         * 附加操作onchange事件,这里主要是正对浏览按钮
         * @param ids_value 改变后的ids值
         * @param names_value 改变后的value值
         * @param datas 改变数据的封装【可以传null】
         * @param row 所属改变行的整体数据
         * @param id 列id
         * @param isnode 是否是节点
         * @param islink 是否是出口
         */
        fnAdditionalChange = (ids_value, names_value, datas, row, id, isnode, islink) => {
            const {myCusIntSet} = this.props;				//使用可编辑表格,那么肯定会有一个原始数据供我们操作,这里就是tabledata
            const {tabledata, updateTableData} = myCusIntSet;
            tabledata && tabledata.map(item => {
                if (isnode && item.nodeid == row.nodeid) {//这里就是同步所有行的数据一致
                    item[id] = ids_value;
                    item[id + "span"] = names_value;
                }
                if (islink && item.linkid == row.linkid) {//这里是同步所有列的数据一致
                    item[id] = ids_value;
                    item[id + "span"] = names_value;
                }
            })
            tabledata && updateTableData(toJS(tabledata));
        }
    

    解决关键:对于原始数据上操作时,相同的行列数据,给定特定的标识符【用同样的id,或者其他属性】

    问题3解决:提交数据【数据保存】
    这里我们可以通过set集合判断数据是否重复,从而去掉重复数据。或者执行数据持久时,先判断数据是否存在,存在相同数据则不保存即可。
    特别注意:对于这种可编辑数据我们传递给后台需要做数据转换前端:JSON.stringify(tabledata), 后端: JSONArray.fromObject(tabledata);//转json数组.具体请参看我的另外一篇文章我的JSON问题


    到此结束:欢迎大家指导。

    展开全文
  • 每种方法中上面的是Excel的行数,下面的是Excel的数。 方法1:  ActiveSheet.UsedRange.Rows.Count   ActiveSheet.UsedRange.Columns.Count  缺点:有时可能会比实际数大一些,原因是如果你把最后几行(...
  • ant design pro中有一个基础表格的封装,但是分页是前端分页处理数据; 项目中每个页面都有用到... 说明 类型 默认值 tablePatam 表格的一些参数,pageSize/pageNo/loading/filterParam Object {} ...
  • Excel表格匹配查找方法:VLOOLUP方法

    千次阅读 2019-07-15 22:07:00
    日常用表格处理问题时会遇到一些匹配查找的场景如在A表格中有根据某些应用的问题需要指定责任人,而责任人再意外一个sheet页或者另外一个表格B中...可以用VLOOLUP方法从B表格中找到对应的责任人后填写到A表格的责任人...
  • Python xlwt 模块编辑 Excle 表格 实例:按行按写入、自定义格式方法、自动调整列宽等前言:一、自写类实现:新建工作薄 sheet表,保存文件功能二、自写按行、按写入方法三、自写创建格式方法四、自写设置行高...
  • 在QTableWidget表格部件中,如果需要实现表格中各要占满部件中的可用空间,同时实现各平分所有空间,有两种方法来实现。 方法一、设置水平表头的sectionResizeMode为Stretch 当水平表头的sectionResizeMode设置...
  • 表格方向上渲染数据

    千次阅读 2018-08-07 14:18:30
    表格方向渲染数据 需求: 如图按两列渲染数据: 如果是一条数据和一个对应的值就不会出现问题。但是如果某一个数据的值有多个,并且需要显示在不同的行的话就会有问题。问题是:会循环出多个td在一行中。...
  • pandas DataFrame表格()拼接(concat,append,join,merge)

    万次阅读 多人点赞 2019-09-19 10:58:35
    文章目录一、pd.concat()二、df.append()三、df.join()四、pd.merge() 方法说明 ...axis设置用于df间行拼接(增加行)或拼接(增加)进行内联或外联...dataframe数据类型的方法,提供了方向(拼接)...
  • 需要引入的东西 bootstrap.min.css bootstrap-table.css bootstrap-table-fixed-columns.css jquery.min.js bootstrap.min.js bootstrap-table.js ...一个方法; $el.bootstrapTable(‘destr...
  • Typora通过html代码改变表格列

    千次阅读 2020-05-17 13:35:00
    Typora通过html代码改变表格...在源码编辑模式下所需表格中写入即可: <span style="display:inline-block;width:100px">版本说明</span> 退出源码编辑模式,在空白区双击一下就看到结果了 ...
  • 这段时间我们的项目中采用了Coolite来做富客户端,Coolite目前的版本是0.8.1,它所采用的Ext版本是2.2.1,因此下面主要是说明在这个版本下所实现的锁定和多行表头,需要说明的是Ext在2.0版本以后就不自带锁定...
  • [图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/9.gif)![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/9.gif)![图片]...
  • 由于jqgrid中的colNames和colModel都是不可改变的,所以有个取巧一点的方法,就是把需要的所有列都出来,把需要隐藏的使用hideCol方法隐藏,需要显示的使用ShowCol方法显示。代码如下: $("#gridTable")....
  • VBA取得EXCEL表格中的行数和

    千次阅读 2019-07-25 15:50:41
    VBA取得EXCEL表格中的行数和数 请注意不要使用Columus等关键字作为变量,例如"Columus = ActiveSheet.UsedRange.Columns.Count"! 初学EXCEL宏的童鞋,总是很想知道表格中含有数据的行数和数,尤其是行数和数...
  • JS控制表格显示和隐藏

    千次阅读 2011-08-26 22:50:08
    JS控制表格显示和隐藏 /* * 控制表格显示和隐藏 * 使用方法:在网页读取时调用control_show()方法即可。 * 说明: * table_cell_dis()方法为获取 显示/隐藏 控制栏。 * tb_showbox()方法为显示和隐藏...
  • jGrid表格里,通常的宽度会自适应的填充至整个表格,一般当字段多的时候倒没什么关系。但如果表内只有两三个字段,的宽度自适应表的宽度后,看起来就很别扭。 $("#meterTypeGrid").jqGrid({ url:...
  • 通过js实现固定表格的表头和某 在开发过程中,如果数据比较多并且需要对比查看的情况下,一般是是需要固定表头和开始的某几列。可以通过一些组件进行实现。但是引用组件需要引入大量的js文件或者不满足某一方面的...
  • 关于layui数据表格的自定义问题

    千次阅读 2018-10-23 17:57:52
    layui数据表格,有时候某是由其他的值相加或者拼接而成,并非后台数据字段直接映射而成,这时候需要用到layui的模板:laytpl。  laytpl资料参考:https://www.layui.com/doc/modules/laytpl.html。 如下截图...
  • //函数说明:合并指定表格表格id为_w_table_id)指定数为_w_table_colnum)的相同文本的相邻单元格 //参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 ...
  • 我想在easyui表格最后一添加滑动开关按钮,但是运行效果是变成了input框,![图片说明](https://img-ask.csdn.net/upload/201807/19/1531994465_763991.jpg),下面是我的代码截图![图片说明]...
  • 移动端实现固定表格和表头(vue) 因为移动端项目需求要实现一个可以固定表格和表头的表格,但是移动端对表格需求很少,用的组件库中也没有设计这个组件,也不能用插件,所以只能自己写一个。语言是vue。 ...
  • word宏 批量删除含有关键字的表格列

    千次阅读 2019-10-03 22:42:02
    工作中,由于每次修改word文档,都需要进行繁琐的修改,删除多余的或者调节表格的宽度。 使用word宏编程的方式对word文档进行对应的操作。 宏: 1 Sub del_key() 2 Dim str As String 3 Dim table_...
  • 最近有位朋友在处理千牛的后台数据时,需要合并两个表格,两个表格(设为A表格和B表格)的订单号是一致的,其中A表格中的编号会有对应几条记录的情况,而B表格中一个编号只对应一条记录。 由于VBA可以直接在Excel...
  • ![图片说明](https://img-ask.csdn.net/upload/201808/07/1533620353_584169.png) ![图片说明]...我先拖动表格列宽,然后用表头过滤数据(走的是一个loadData方法)但是数据与表头对不齐
  • 功能介绍 表头筛选、自定义条件(支持前端筛选、后台筛选) 拖动调整顺序、隐藏显示 excel导出(根据筛选条件和顺序导出) 子表(表中表、无限层级、子表同样支持前3个...跳转至layui-soul-table说明文档 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 153,802
精华内容 61,520
关键字:

列表格的说明方法