午休时间写了一个使用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.效果

最新文章

  1. MySQL 配置
  2. 为什么一个类的全局变量默认以m开头?
  3. MySQL ibdata1文件迁移
  4. 【Add binary】cpp
  5. 解决eclipse-helios中Errors running builder JavaScript Validator的问题
  6. jquery动态添加/删除 tr/td
  7. MVC — 初步理解IIS工作流程
  8. springmvc对于JSON对象的处理
  9. Django学习笔记二
  10. vue/iview使用moment.js
  11. R 语言 decostand() 函数
  12. Match-----Gray-value-----基于灰度值的模板匹配
  13. 使用netty编写IM通信界面
  14. pymysql 模块 使用目录
  15. php导出大数据scv
  16. jquery查找筛选器
  17. fedora安装字体
  18. kukubeadm 1.6.1 + docker1.2.6 安装问题
  19. startActivityForResult()的用法(超好用啊)
  20. Codeforces Round #256 (Div. 2) C. Painting Fence

热门文章

  1. [luogu_P2045]方格取数加强版
  2. [ZJOI2012][bzoj 2816] 网络 network [LCT]
  3. P2647 最大收益 (动态规划)
  4. webstorm配置autoprefix
  5. 当时用vuex的时候,使用...对象展开扩展符报错的解决办法
  6. 【11】 Express安装入门与模版引擎ejs
  7. 使用Google的Gson实现对象和json字符串之间的转换
  8. *LOJ#2306. 「NOI2017」蔬菜
  9. [LeetCode] Compare Version Numbers 字符串操作
  10. Syslog协议日志格式翻译