专栏首页飞扬的花生html的table使用div创建

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • BootStrap学习------栅格

        使用Bootstrap前端框架-栅格 要点 1.使用Bootstrap需要引入的css和js:     (1)bootstrap.min.js     ...

    用户1055830
  • 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把...

    用户1055830
  • 一步一步完成一个聚会摇色子游戏

          出去聚会想玩摇色子,奈何身边没有色子,网上也没找到,自己写一个吧 一、画界面       色子要大明显字要大,摇动最好有特效和声音,前端使用layu...

    用户1055830
  • django 实现电子支付功能

      思路:调用第三方支付 API 接口实现支付功能。本来想用支付宝来实现第三方网站的支付功能的,但是在实际操作中发现支付宝没有 Python 接口,网上虽然有他...

    希希里之海
  • 【可视化】Vue基础

    Vue框架,框架的作者,尤雨溪,组件化,快速开发的特点。 生命周期 beforeCreate:组件刚刚被创建 created:组件创建完成 生成

    达达前端
  • Vue实践--指令

    1. v-text     v-text主要用来更新textContent,可以等同于JS的text属性。

    问天丶天问
  • css3转换(banner)

    天天_哥
  • 2301: [HAOI2011]Problem b

    2301: [HAOI2011]Problem b Time Limit: 50 Sec  Memory Limit: 256 MB Submit: 1737...

    HansBug
  • jquery实现下拉框选中对应的div

    这是一个很简单的功能,jquery实现下拉框选中对应的div。 虽然简单但是会在项目之中经常会用到,尤其是统计的时候,按照不同类型或者不同的年月日来选择相对应...

    祈澈菇凉
  • NEC html规范

    HTML规范 - 整体结构 HTML基础设施 文件应以“<!DOCTYPE ......>”首行顶格开始,推荐使用“<!DOCTYPE html>”。 必须申明...

    用户1197315

扫码关注云+社区

领取腾讯云代金券