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=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; }
    }

3.效果