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如何安装cv2
使用pip3 安装cv2包的时候报错 PS C:\Users\lenovo> pip3 install cv2 Collecting cv2 Could not find a version t ...
- LoadRunner 安装汉化后的一些问题
我装好LoadRunner11后,按照下面的方法破解: 1. 把loadrunner相关程序全部退出: 2. 用LR8.0中的mlr5lprg.dll.lm70.dll覆盖LR9.5安装目录下“b ...
- OO第十五次作业
一.测试与正确性论证的效果差异 测试和正确性论证分别是从理论和实践两个角度去规范程序的正确性的,我认为其主要的区别在于对于程序透明度的需求上, 测试作为一种实践手段,他的实施的要求是比较低的:在完全了 ...
- Java 8 默认方法
转自:https://www.runoob.com/java/java8-default-methods.html Java 8 新增了接口的默认方法. 简单说,默认方法就是接口可以有实现方法,而且不 ...
- centos mysql 修改mysql用户密码
查看服务器版本: cat /etc/redhat-release 查看mysql 版本: mysql -u root -p use mysql; ###mysql 5.7以上.. update use ...
- 查看log日志
本地环境的的log日志 可以直接查看, 对于新手来说怎么查看正式环境下的log日志呢 1, SSH到服务器 2,cd 到logs所在目录 3, tail -f 对应日志名字
- Centos7下杀毒软件clamav的安装和使用
目录 一.yum安装 二.编译安装 2.1:下载软件包 2.2:创建clamav用户和存放病毒库目录 2.3:解压安装包 2.4:安装依赖 2.5:编译安装 2.6:配置clamav 2.7:启动cl ...
- ActiveMQ安装使用与spring整合配置教程
https://blog.csdn.net/qq_22075041/article/details/77602996
- mysqli链接数据库
<?php $uid = $_GET['uid']; $host = 'localhost';$database = 'test';$username = 'root';$password = ...
- Django 缓存
官方文档 缓存的出现就是为了减轻对数据库的压力和加快内存访问的速度.我们的访问请求最终都是返回一个大的字符串,缓存就是将这段字符串直接存储起来,下次你来了,不用经过view去数据库或者内存拿到数据再渲 ...