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.效果