html的table使用div创建
午休时间写了一个使用div创建table的案例
1.样式
<style>
.table {
display: table;
} .tableRow {
display: table-row;
} .tableRow div {
display: table-cell;
background: #EEE;
border: 1px solid #777;
padding: 1em;
}
</style>
2.html和后端
<div class="table">
<div class="tableRow">
<div>ID</div>
<div>姓名</div>
<div>年龄</div>
<div>联系方式</div>
<div>是否已婚</div> </div> @foreach (var entity in Model)
{
<div class="tableRow">
<div>@entity.SID</div>
<div>@entity.SName</div>
<div>@entity.SAge</div>
<div>@entity.SPhone</div>
<div><input type="checkbox" checked="@entity.IsMarry" /></div>
</div>
}
</div>
public class HomeController : Controller
{
//
// GET: /Home/ public ActionResult Index()
{
//组装测试数据
IList<Student> studentList = new List<Student>()
{
new Student(){ SID=,SName="诸葛亮", SAge=, IsMarry=true,SPhone=""},
new Student(){ SID=,SName="周公瑾", SAge=, IsMarry=true,SPhone=""},
new Student(){ SID=,SName="马孟起", SAge=, IsMarry=true,SPhone=""},
new Student(){ SID=,SName="赵子龙", SAge=, IsMarry=true,SPhone=""},
new Student(){ SID=,SName="关云长", SAge=, IsMarry=true,SPhone=""},
new Student(){ SID=,SName="CallmeYhz", SAge=, IsMarry=false,SPhone=""}
};
return View(studentList);
}
} /// <summary>
/// 学生实体
/// </summary>
public class Student
{
public int SID { get; set; } public string SName { get; set; } public int SAge { get; set; } public bool IsMarry { get; set; } public string SPhone { get; set; }
}
3.效果
html的table使用div创建的更多相关文章
- table和div设置height:100%无效的完美解决方法
刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...
- table与div互相嵌套注意
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- table 和 div 简单布局
table 简单布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- 浅谈table和DIV网页布局
DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DI ...
- Jquery table元素操作-创建|数据填充|重置|隐藏行
1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...
- html中table的画法及table和div的区别
最近项目中,根据客户的要求需要在页面上展示各种报表什么的,各种表格的都会出现.这里也将table的画法,做一下总结.办法虽笨但很实用.这也是从高人那里学来的,总之是屡试不爽啊.就以下面的表格为例. 若 ...
- table 与 div 固定宽高问题
div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{t ...
- Iframe框架+table布局 +div布局实例
<td colspan="2" style="width: 80%"> <iframe src="http://www.baidu. ...
- 项目期复习总结2:Table, DIV+CSS,标签嵌套规则
文件夹: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的差别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表 ...
随机推荐
- jquery 实践操作:div 动态嵌套页面
此篇记录如何在指定 div 中嵌套一个页面 load() 方法: 1. 使用 $.load() 直接导入一个页面 $('#addPage_div').load("temp/handle.ht ...
- 【05】js异步编程理解
1.概念 同步:一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的.同步的.异步:每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务, ...
- ckeditor与ckfinder的使用方法 .NET (转载)
原文发布时间为:2009-11-25 -- 来源于本人的百度文章 [由搬家工具导入] ckeditor与ckfinder的使用方法 .NET (转载) ckeditor 3.0.1学习笔记 一.ck ...
- Nhibernate基本的增删改查实践
1.链接配置 <?xml version="1.0" encoding="utf-8" ?> <hibernate-configuration ...
- 利用canvas裁剪想要的图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- android的布局-----FrameLayout(帧布局)
(-)帧布局简介 帧布局容器为每个加入的其中的组件创建一个空白的区域称为一帧每个子组件占据一帧,这些帧都会根据gravity的属性执行自动对齐 (二)属性 foreground:这是帧布局的前景图像 ...
- Android启动过程深入解析【转】
转自:http://www.open-open.com/lib/view/open1403250347934.html 当按下Android设备电源键时究竟发生了什么? Android的启动过程是怎么 ...
- hdu 3440(差分约束好题)
House Man Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- Eclipse 导入项目乱码问题
1.编码不对 a.对某文件或某工程更改编码: 鼠标移到工程名或文件名,右键->Properties->Resource->Text file enCoding ->更改编码(G ...
- POJ 3070 Fibonacci【斐波那契数列/矩阵快速幂】
Fibonacci Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17171 Accepted: 11999 Descr ...