table 的部分使用，固定行，固定列等
主要是用多张table表格实现 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table,
table tr th,
table tr td {
border: 1px solid #666;
text-align: center;
} body {
padding-top: 200px;
padding-left: 200px
} table {
border-collapse: collapse;
overflow: auto
} .tableOne {
width: 100px;
} .tableThree {
width: 100px;
/* margin-left: -1px */
} .tableTwo {
width: 800px;
/* margin-left: -1px */
} td {
width: 100px;
} .left {
float: left;
} .right {
float: left;
} .center {
float: left;
width: 400px;
overflow: auto;
}
</style>
</head> <body> <div class="left">
<table class="tableOne">
<tbody>
<tr class="table-row">
<td class="table-name">项目基本</td>
</tr>
<tr class="table-row">
<td class="table-name">项目基本</td>
</tr>
<tr class="table-row">
<td class="table-name">项目基本</td>
</tr>
<tr class="table-row">
<td class="table-name">项目基本</td>
</tr>
<tr class="table-row">
<td class="table-name">项目基本</td>
</tr>
<tr class="table-row">
<td class="table-name">项目基本</td>
</tr>
</tbody>
</table>
</div>
<div class="center">
<table class="tableTwo">
<tbody>
<tr class="table-row">
<td class="table-name">项目基本</td>
<td class="table-first">项目基本概况</td>
<td class="table-all">-9-</td>
<td class="table-score">-9-</td>
<td class="table-get">83</td>
<td class="table-weight">0.8</td>
<td class="table-weiscore">26.4</td>
</tr>
<tr class="table-row">
<td class="table-first">团队基本</td>
<td class="table-all">9</td>
<td class="table-score">9</td>
<td class="table-get">83</td>
<td class="table-weight">0.8</td>
<td class="table-weiscore">26.4</td>
<td class="table-weiscore">26.4</td>
</tr>
<tr class="table-row">
<td class="table-first">团队n5</td>
<td class="table-all">9</td>
<td class="table-score">9</td>
<td class="table-get">83</td>
<td class="table-weight">0.8</td>
<td class="table-weiscore">26.4</td>
<td class="table-weiscore">26.4</td>
</tr>
<tr class="table-row">
<td class="table-first">团队n5</td>
<td class="table-all">9</td>
<td class="table-score">9</td>
<td class="table-get">83</td>
<td class="table-weight">0.8</td>
<td class="table-weiscore">26.4</td>
<td class="table-weiscore">26.4</td>
</tr> <tr class="table-row">
<td class="table-first">团队n5</td>
<td class="table-all">9</td>
<td class="table-score">9</td>
<td class="table-get">83</td>
<td class="table-weight">0.8</td>
<td class="table-weiscore">26.4</td>
<td class="table-weiscore">26.4</td>
</tr>
<tr class="table-row">
<td class="table-first">团队n5</td>
<td class="table-all">9</td>
<td class="table-score">9</td>
<td class="table-get">83</td>
<td class="table-weight">0.8</td>
<td class="table-weiscore">26.4</td>
<td class="table-weiscore">26.4</td>
</tr>
</tbody>
</table>
</div>
<div class="right">
<table class="tableThree">
<tbody>
<tr class="table-row">
<td class="table-name">项目基本2</td>
</tr>
<tr class="table-row">
<td class="table-name">项目基本2</td>
</tr>
<tr class="table-row">
<td class="table-name">项目基本2</td>
</tr>
<tr class="table-row">
<td class="table-name">项目基本2</td>
</tr>
<tr class="table-row">
<td class="table-name">项目基本2</td>
</tr>
<tr class="table-row">
<td class="table-name">项目基本2</td>
</tr>
</tbody>
</table>
</div>
</body> </html>
table 的部分使用，固定行，固定列等的更多相关文章
- mssql sqlserver 不固定行转列数据(动态列)
转自:http://www.maomao365.com/?p=5471 摘要: 下文主要讲述动态行列转换语句,列名会根据行数据的不同, 动态的发生变化 ------------------------ ...
- AdvStringGrid 固定行、列
- Oracle 行转列 动态出转换的列
本文链接:https://blog.csdn.net/Huay_Li/article/details/82924443 10月的第二天,前天写了个Oracle中行转列的pivot的基本使用方法,然后, ...
- oracle行转列和列转行（pivot 和 unpivot 函数，wm_concat函数 ）
create table demo(id int,name varchar(20),nums int); ---- 创建表insert into demo values(1, '苹果', 1000); ...
- GridView固定行宽,自动换行,鼠标放在Table的Tr上变色
//固定行宽table-layout:fixed;//自动换行word-break :break-all;word-wrap:break-wordGridView.Attributes.Add(&qu ...
- html table 固定表头和列
/**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...
- table固定前两列和最后一列，其他滑动显示
网上搜的基本都是4个table做的,数据处理比较麻烦,写了个一个table的,此示例只固定了前两列和最后一列,和网上的不太一样. 网上搜的基本都是4个table做的,数据处理比较麻烦,写了个一个tab ...
- C# Winform中FpSpread表格控件设置固定的（冻结的）行或列
在项目中我们经常会用到固定表头的操作,FpSpread提供了冻结行或列的属性. 你可以冻结表单中的行或列(使其不可滚动). 你可以冻结任意个表单顶部的行,使其成为前导行,你也可以冻结左侧任意多个列,使 ...
- vue表格实现固定表头首列
前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
- bootstrap-table固定表头固定列
1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js <tabl ...
随机推荐
- Linux基本指令
常用目录文件作用 - / 根目录 - /bin 命令保存目录(普通用户就可以读取的命令) - /boot 启动目录,启动相关文件 - /dev 设备文件保存目录 - /etc ...
- Springboot整合druid
目录 Springboot整合druid application.yml DruidConfig 数据监控地址:http://localhost:8080/druid Springboot整合drui ...
- hive 学习
多表查询 SELECT a.user_uid_type, a.user_uid, c.user_id, c.user_type FROM mytable1 a JOIN mytable2 b ON(a ...
- WebView内容自适应
webview页面自适应 //适应内容大小 start webSetting.setUseWideViewPort(true); webSetting.setLayoutAlgorithm(WebSe ...
- Python爬虫与数据分析之模块：内置模块、开源模块、自定义模块
专栏目录: Python爬虫与数据分析之python教学视频.python源码分享,python Python爬虫与数据分析之基础教程:Python的语法.字典.元组.列表 Python爬虫与数据分析 ...
- js基本知识
1.js中的数据类型: js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型. 2.typeof 返回的是字符串,有 ...
- 使用ScheduledThreadPoolExecutor执行定时任务
ScheduledThreadPoolExecutor scheduled = new ScheduledThreadPoolExecutor(2); scheduled.scheduleAtFixe ...
- Unity4.3.4 安装出现 pattern not found
第一次破解不成功,第二次破解的时候就会出现这个错误 删除C:\ProgramData\Unity里面文件后,再重启后点击Manual Activation,出现的对话框是是保存当前序列号?重新加载序列 ...
- Spring切面编程实践【原创】
定义 什么叫Spring面向切面编程(AOP),请自行百度,这边就不做详细介绍了. 场景 有两个对象,字典和工程信息Bean,每次新增或修改对象时,记录新增和修改的时间. 基类定义 package m ...
- php+Ajax 例子
PHP <?php $action = $_GET['action']; switch ($action) { case 'init_data_list': init_data_list(); ...