精华内容
下载资源
问答
  • elementUI table宽度自适应fit

    万次阅读 2019-07-24 17:42:00
    :fit='true' 或者直接为 fit 转载于:https://www.cnblogs.com/panax/p/11239664.html
    :fit='true' 
    或者直接为 fit

     

    转载于:https://www.cnblogs.com/panax/p/11239664.html

    展开全文
  • 做表单界面时,我想到最好的方法应该是,标题栏所在的列宽度固定,内容栏所在的列宽度自适应且要均分,这样整体表格看起来才美观有序。要做到这一点,目前只摸索出一种办法:1,给tabletable-layout: fixed;2,在...

    做表单界面时,我想到最好的方法应该是,标题栏所在的列宽度固定,内容栏所在的列宽度自适应且要均分,这样整体表格看起来才美观有序。

    要做到这一点,目前只摸索出一种办法:

    1,给table加table-layout: fixed;

    2,在每个table的第一行,加

    ,有多少列,对应加多少个

    3,给指定列固定宽度的

    加成,然后给title定义宽度,其他列的加成

    案例代码:

    案例文档

    table{

    width: 100%;

    border-collapse: collapse;

    border: 1px solid #000;

    word-break:break-word;

    word-wrap:break-word;

    table-layout: fixed;

    }

    table tr td{

    border: 1px solid #000;

    }

    .title {

    background-color: #eee;

    width: 120px;

    text-align: center;

    }

    标题:
    标题:内容标题:
    标题:
    标题:内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容标题:

    注意:这里有一个问题,有可能你程序没法在table的第一行

    前面加,比如asp.net的webform里面就不知道怎么加,此时的变通方法是,把换成一个空的,在上同样加对应的class和width属性,然后通过样式把这个空行的边框和高度去掉,不显示。

    原理:通过控制第一行各个列的宽度,来实现对整个表格的列进行控制。

    展开全文
  • 1.写页面table 2.基础样式 3.js写入数据 4.js设置生成class 5.对个全部的class 做宽度设置 6.对个别的class 做宽度设置 用* 百分比的方式实现,一个多另一个就少点即可 多个情况进行计算即可 样式 实例 ...

    目录

    介绍

    样式

    实例


    介绍

    • 1.写页面table
    • 2.基础样式
    • 3.js写入数据
    • 4.js设置生成class
    • 5.对个全部的class 做宽度设置
    • 6.对个别的class 做宽度设置 用* 百分比的方式实现,一个多另一个就少点即可
    • 多个情况进行计算即可

     

    样式

    实例

    <html>
    <head>
    	<title>New Document</title>
    	<meta name="Generator" content="EditPlus">
    	<meta name="Author" content="">
    	<meta name="Keywords" content="">
    	<meta name="Description" content="">
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <style>
    	body {padding: 100px 0 0 100px;}
    	/* text-align*/
    	table{text-align:center;}
    	/* width  display*/
    	table thead{ width: 600px;display:block; }
    	/* width height display overflow*/
    	table tbody{width: 600px;height: 100px;display:block;overflow: auto;}
    	/*width border */
    	table tbody tr td{border:1px solid #000;	width:200px; }
    	/* width border */
    	table thead tr th{border:1px solid #000; width:200px; }
    	
    </style>
    <body>
    	<!-- 表格去除空隙 -->
    	<table border="0" cellpadding="0" cellspacing="0"> 
    			<thead></thead>
    			<tbody></tbody>
    	</table>
    </body>  
    <script>
    
    //数据替换成自己需要用的数据
    var data = [{  "s4": "ss", "s5": "ss", "s6": "ss" },{  "s4": "ss", "s5": "ss", "s6": "ss" }]
    
    //直接把表头和表内全部载入
    var addTableF = function (features) {
    	var hthead = "";
    	var htbody = "";
    	var num = 0;
    	hthead += '<tr>';//编写表头
    	for (var j in features[0]) {
    		hthead += '<th><div class="st'+(++num)+'">' + j + '</div></th>';
    	}
    	hthead += '</tr>';
    	for (i = 0, len = features.length; i < len; i++) {//编写表格
    		htbody += '<tr>';
    		num=0;
    		for (var j in features[i]) {
    			htbody += '<td><div class="st'+(++num)+'">' + features[i][j] + '</div></td>';
    		}
    		htbody += '</tr>';
    	}
    	$("table thead").empty().html(hthead);
    	$("table tbody").empty().html(htbody);
    	$(".st1").css("width",(600/4*1.0)+"px");
    	$(".st2").css("width",(600/4*0.3)+"px");
    	$(".st3").css("width",(600/4*1.8)+"px");
    }
    addTableF(data);
    
    
    </script>
    </html>

     

     

    ok

     

     

     

    持续更新

     

     

     

    展开全文
  • el-table表头自适应宽度(Vue) html部分 <el-table> <el-table-column lable="根据标题字数/大小自适应宽度" :render-header="linefeed"></el-table-column> </el-table> js部分 methods: ...

    el-table表头自适应宽度(Vue)

    html部分

    <el-table>
    	<el-table-column label="根据标题字数/大小自适应宽度" :render-header="linefeed"></el-table-column>
    </el-table>
    

    js部分

    methods: {
    	linefeed (h,{column,index}) { // column,index都是el-table中自带的
    		let number = column.label.length // 表头字数
    		let size = 16 // 字体尺寸
    		column.minWidth = number*size // 计算宽度
    		return h('div',{class:'table-head',style:{width:'100%'}},[column.label])
    	}
    }
    

    效果展示(下图为其他项目截图,但与上述代码效果一致)

    在这里插入图片描述

    语录分享

    在这里插入图片描述

    展开全文
  • table-layout:fixed 属性的解说 如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixed...
  • 做表单界面时,我想到最好的方法应该是,标题栏所在的列宽度固定,内容栏所在的列宽度自适应且要均分,这样整体表格看起来才美观有序。要做到这一点,目前只摸索出一种办法:1,给tabletable-layout: fixed;2,在...
  • 如何设置HTML页面自适应宽度table 1 2 3 4 5 如何设置HTML页面自适应宽度tabletable的标题栏固定,根据浏览器定位,并且td 宽度定位的话可以用position属性。 如果是滚动屏幕table标题栏不动的话可以设置...
  • 介绍 1.js拼接table ...设置自适应 4.css更改 5.js样式更改 6.ok 样式 代码 <html> <head> <title>New Document</title> <meta name="Generator" content="EditPlu...
  • 关于table设置固定宽度高度自适应

    万次阅读 2016-08-19 23:57:43
    宽度自适应 分类: 计算机-开发-脚本 WEB应用的页面,表格的表现形式是常常遇到的,在列数有限的前提下,如何将各列中的内容自适应到不同分辨率的屏幕,这应该是一个比较容易遇到的问题,下面就来...
  • layui表格高度宽度自适应

    千次阅读 2020-06-10 14:47:20
    .layui-table-cell { height: auto ; white-space: normal; } HTML <table class="layui-table-cell" id="test" lay-filter="test"> <script type="text/html" id="zizeng"> {{d.LAY_...
  • 最简单的方法实现部分列固定宽度,一列随着容器宽度自适应 table-layout: fixed ,并且这是部分固定宽度列的宽度,并且td overflow:hidden,防止溢出 并且table的宽度100% DEMO 如下:实现随着页面的...
  • 如何使报表宽度自适应分辨率

    千次阅读 2016-12-09 16:01:12
     一、问题描述 润乾报表为了保证精确显示,宽度给定的是一个绝对值,所以不管分辨率是多少,报表显示的宽度是固定的。但是,现在报表用户报表并不单纯作为一...报表解析为html后,其实就是一个table,所以如果能
  • 锁定首列其他列宽度自适应HTML效果演示 .selectedRow{ color:#000000; BACKGROUND-COLOR: #C1C9CE;}function selectTableRow(){ var srcObj = event.srcElement; var cellObj = srcObj; table=srcObj; var ...
  • HTML页面自适应宽度table(表格)

    万次阅读 2017-08-26 20:30:22
    WEB应用的页面,表格的表现形式是常常遇到的,在列数有限的前提下,如何将各列中的内容自适应到不同分辨率的屏幕,这应该是一个比较容易遇到的问题,下面就来谈一谈我对这类问题的解决与看法。 将所有列设置为固定...
  • 第一种:display:table-cell的应用 html代码 css代码: .wrapper{ width:100%; display:table; } .left{ width:200px; display:table-cell; background:red;/*为了下边明显看出效果*/ } .right{ background:...
  • 一.display:table-cell的应用首先是简单的html:下面是css代码: 以下是效果图:必须注意的是,左侧div必须设置超过父元素减去右侧元素的宽度 但是这个方法会产生一个问题,它会使左边的div高度等于右侧div的高度 ...
  • 这篇文章主要介绍了HTML页面自适应宽度table(表格),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧WEB应用的页面,表格的表现形式是...
  • 如何设置HTML页面自适应宽度table(表格)

    万次阅读 多人点赞 2015-09-07 11:00:35
    WEB应用的页面,表格的表现形式是常常遇到的,在列数有限的前提下,如何将各列中的内容自适应到不同分辨率的屏幕,这应该是一个比较容易遇到的问题,下面就来谈一谈我对这类问题的解决与看法。   将所有列设置为...
  • 关于自适应高度,361源码在以前给大家介绍过iframe的自适应高度的方法,有需要了解的朋友可以参看《如何通过javascript或者jquery实现iframe自适应内容高度和宽度》一文。昨天在制作专题中需要做一个单价展示的内容...
  • table>没有设置,那么网页缩放的时候就会出现以下情况。 解决办法: <table style="width:100%;table-layout:fixed;" class="Table1" runat="server"> <tr> <td style="width:15%;word-...
  • JTable如何使列宽度自适应内容呢?

    千次阅读 2005-08-18 14:49:00
    第一篇:http://java.sun.com/docs/books/tutorial/uiswing/components/table.html第二篇:http://jroller.com/page/santhosh?entry=action_to_fit_table_columns
  • Html表格到一定宽度无法自适应

    千次阅读 2015-01-25 13:50:06
    一般的自适应都可以通过这篇博文:http://caibaojian.com/simple-responsive-table.html 来解决。 但是最近做一个页面的时候,发现表格到一定的宽度就无法自适应了,查了半天也没找到原因,最后发现元凶是 textarea...
  • WEB应用的页面,表格的表现形式是常常遇到的,在列数有限的前提下,如何将各列中的内容自适应到不同分辨率的屏幕,这应该是一个比较容易遇到的问题,下面就来谈一谈我对这类问题的解决与看法。 将所有列设置为...
  • 本文链接:http://www.cnblogs.com/jying/p/6289981.html table-layout 属性的解释:http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1,实现table细边框,设置如下css: table,table td,...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 143
精华内容 57
热门标签
关键字:

htmltable宽度自适应