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 ...
随机推荐
- mysql 聚集函数 count 使用详解(转载)
本文将探讨以下问题 1.count(*) . count(n).count(null)与count(fieldName)2.distinct 与 count 连用3.group by (多个字段) 与 ...
- An item with the same key has already been added. Key: Pomelo.EntityFrameworkCore.MySql.Infrastructure.Internal.MySqlOptionsExtension
An item with the same key has already been added. Key: Pomelo.EntityFrameworkCore.MySql.Infrastructu ...
- all-document
1.memorymanagement-whitepaper J2SE5.0 JVM 垃圾回收器相关英文 链接: https://pan.baidu.com/s/1mzkMxuFE82sfeVOToMb ...
- 分组密码算法AES-128,192,256 C语言实现第一版
AES的C语言实现入门版 AES分组密码算法中明文分组位128bits,密钥分组可以为128,192,256bits.AES也是由最基本的变换单位——“轮”多次迭代而成的.我们将 AES 中的轮变换计 ...
- go 语言学习笔记（一）
本次学习目的:熟悉了解 go 语言特点,实现基本功能. 1.readfile.go package main import ( "bufio" "fmt" &q ...
- Django return
return HttpResponse("OK") 返回一个字符串 return redirect("/index/") 返回URL return render ...
- java学习--Iterable 和 Iterator
Iterable Iterable :故名思议,实现了这个接口的集合对象支持迭代,是可迭代的. 一个集合对象要表明自己支持迭代,能有使用foreach语句的特权,就必须实现Iterable接口,表明我 ...
- [Flutter] 因为不讲这个重点, 全网所有 flutter 实战视频沦为二流课程
二流课程也有其存在的价值,看到不同组件的轮流使用也是不断熟悉的过程,不过太眼花缭乱了. 授人以渔,基础用法是其一,讲清套路是其二,不然坑萌新. 那么 flutter 的套路是什么呢,我认为有下面几点: ...
- Spring_Four -- 团队项目设计完善&编码测试
团队项目设计完善&编码测试 1.文档<软件设计方案说明书>github地址:https://github.com/gzyt/SRS 2.项目集成开发环境 数据库:Mysql 5.0 ...
- 安装USB驱动时报错“无法启动服务，原因可能是已被禁用或与其相关联的设备没有启动”
今天在安装一个USB设备的时候报错“Windows已找到设备的驱动程序软件,但在试图安装它时遇到错误”. 这个错误的描述是“无法启动服务,原因可能是已被禁用或与其相关联的设备没有启动”. 事实上,这个 ...