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 ...
随机推荐
- python 内建函数__new__的单例模式
今天好奇__init__和__new__的区别是什么? 我了解到: __init__:只是单纯的返回一个类对象的实例,是在__new__之后调用的 __new__:创建一个类对象实例, class S ...
- 数组Array的API2
数组的方法 arr.push() arr.unshift() arr.pop() arr.shift() arr.slice() arr.splice() arr.join() arr.find() ...
- maven dependency的版本冲突问题
在改造一个旧项目中,遇到各种问题. 旧项目有十多个模块,因为没有一个统一的父pom,它们对第三方的jar的版本没有统一. 虽然也存在公共的依赖模块,比如commons.util,但是,我们的模块中,有 ...
- python module -- sys
sys模块主要是用于提供对python解释器相关的操作 http://www.cnblogs.com/pycode/p/sysos.html http://blog.csdn.net/pipisorr ...
- Kafka运维填坑（转）
前提: 只针对Kafka 0.9.0.1版本; 说是运维,其实偏重于问题解决; 大部分解决方案都是google而来, 我只是作了次搬运工; 有些问题的解决方案未必一定是通用的, 若应用到线上请慎重; ...
- 无分类编址（CIDR，Class Inter-Domain-Routing）
CIDR全称是无分类域间路由选择,英文全称是Classless Inter-Domain Routing,大家多称之为无分类编址 CIDR的特点 (1)CIDR消除了传统的A类.B类和C类地址以及划分 ...
- find、which、whereis、locate和type之间的区别
1.find find是最常用和最强大的查找命令.它能做到实时查找,精确查找,但速度慢. find的使用格式如下: #find [指定目录] [指定条件] [指定动作] 指定目录:是指所要搜索的目录和 ...
- 初识TCP协议
一.引言 发送一段TCP数据大致需要经过:用户封装 –> TCP封装 –> IP封装 –>帧封装 Note:用户封装没啥好说的,都是客户自己决定的,在一些简单的应用情况下,这个步骤可 ...
- NYOJ37-回文字符串(dp)
37-回文字符串 内存限制:64MB 时间限制:3000ms 特判: No通过数:88 提交数:177 难度:4 题目描述: 所谓回文字符串,就是一个字符串,从左到右读和从右到左读是完全一样的,比如& ...
- jQuery之遍历索引相关方法
遍历索引相关方法: .each(),补充.children() .index() 1 .each() 2..children() .index()