html的table使用div创建
2024-08-30 03:23:00
午休时间写了一个使用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.效果
最新文章
- MySQL 配置
- 为什么一个类的全局变量默认以m开头?
- MySQL ibdata1文件迁移
- 【Add binary】cpp
- 解决eclipse-helios中Errors running builder JavaScript Validator的问题
- jquery动态添加/删除 tr/td
- MVC — 初步理解IIS工作流程
- springmvc对于JSON对象的处理
- Django学习笔记二
- vue/iview使用moment.js
- R 语言 decostand() 函数
- Match-----Gray-value-----基于灰度值的模板匹配
- 使用netty编写IM通信界面
- pymysql 模块 使用目录
- php导出大数据scv
- jquery查找筛选器
- fedora安装字体
- kukubeadm 1.6.1 + docker1.2.6 安装问题
- startActivityForResult()的用法(超好用啊)
- Codeforces Round #256 (Div. 2) C. Painting Fence
热门文章
- [luogu_P2045]方格取数加强版
- [ZJOI2012][bzoj 2816] 网络 network [LCT]
- P2647 最大收益 (动态规划)
- webstorm配置autoprefix
- 当时用vuex的时候,使用...对象展开扩展符报错的解决办法
- 【11】 Express安装入门与模版引擎ejs
- 使用Google的Gson实现对象和json字符串之间的转换
- *LOJ#2306. 「NOI2017」蔬菜
- [LeetCode] Compare Version Numbers 字符串操作
- Syslog协议日志格式翻译