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