午休时间写了一个使用div创建table的案例
<style>
.table {
display: table;
}
.tableRow {
display: table-row;
}
.tableRow div {
display: table-cell;
background: #EEE;
border: 1px solid #777;
padding: 1em;
}
</style>
<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=1,SName="诸葛亮", SAge=60, IsMarry=true,SPhone="1111222222"},
new Student(){ SID=2,SName="周公瑾", SAge=40, IsMarry=true,SPhone="21321321"},
new Student(){ SID=3,SName="马孟起", SAge=30, IsMarry=true,SPhone="1111222222"},
new Student(){ SID=4,SName="赵子龙", SAge=25, IsMarry=true,SPhone="1111222222"},
new Student(){ SID=5,SName="关云长", SAge=31, IsMarry=true,SPhone="1111222222"},
new Student(){ SID=5,SName="CallmeYhz", SAge=26, IsMarry=false,SPhone="355555555555"}
};
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; }
}