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 ...
随机推荐
- resttemlate
package com.xjj; import java.util.List; import java.util.Map; import java.util.stream.Collectors; im ...
- tomcat启动问题 严重: End event threw exception
错误信息: 严重: End event threw exception java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebX ...
- Spring Boot——Linux 启动方式
1.前台启动:(ctrl+c会关闭程序) java -jar ****.jar 2.后台启动:(& 后台启动) java -jar ****.jar & 3.控制台输出启动 ...
- Jmeter5.1.1创建一个http请求的压力测试
1.首先添加一个线程组,在线程组中,配置压力情况 2.然后在线程组中,添加取样器,添加http请求:配置web服务器协议(http/https).服务器名称或IP.端口号.请求方法.路径等参数 3.然 ...
- HDU - 3567
https://cn.vjudge.net/problem/HDU-3567 #include <stdio.h>#include <math.h>#include <q ...
- azkaban的简单使用
简单使用 create job 右上角 project创建成功 创建job并上传至该project [root@localhost ~]# cat command.job #command.job t ...
- Python module ---- re
Python 的 re 模块(Regular Expression 正则表达式)提供各种正则表达式的匹配操作,在文本解析.复杂字符串分析和信息提取时是一个非常有用的工具.python的re模块,在绝大 ...
- cmd命令行模式开启或关闭 windows功能 （转载）
1,用管理员身份运行cmd. 2,运行 dism /online /Get-Features >C:\1.txt,这样会在C盘生成一个txt文件,文件内容是功能列表,可以对照“打开或关闭win ...
- 转 JVM找出占用CPU最高的线程
这两天客户这边有一台服务器一到下午3点左右就开始卡住,页面无法访问,服务器CPU占用达到300%多开始以为只是可能只是意外事件,重启一下就好,但是发现重启之后没几分钟服务器马上又反应无法访问,我就开始 ...
- 模拟PLC 的圆弧插补方式在VC中绘制圆弧
最近同事想让要做一个绘图的控件.VC里面的画弧函数Arc需要提供外接矩形的坐标.同事觉得不好用,他更习惯圆弧插补的那种方式.于是看了看圆弧插补的东西.其实这种画弧方式就是提供圆弧的起点.终点和半径来画 ...