牡丹江百姓信息网,广告公司seo是什么职位,dw织梦做网站,最好看免费观看高清大全城中之城表格和项目列表很直观的显示数据#xff0c;是我们web开发中经常遇到的最简单表现信息形式。具体代码如下#xff1a;
一、css代码
ul,ol{margin-left: 1.25em;} /* - 表格 */.myth-table{width: 100%;overflow-x: auto;overflow-y: hidden;border-radius: var(--radius);…表格和项目列表很直观的显示数据是我们web开发中经常遇到的最简单表现信息形式。具体代码如下
一、css代码
ul,ol{margin-left: 1.25em;} /* - 表格 */.myth-table{width: 100%;overflow-x: auto;overflow-y: hidden;border-radius: var(--radius);}table{border: 0;width: 100%;max-width: 100%;caption-side: bottom;border-collapse: collapse;}th:not([align]){text-align: inherit;text-align: -webkit-match-parent;}th, td{ padding: .75em }table thead tr{border-bottom: min(2px, calc(var(--border-width) * 2)) solid var(--gray);border-bottom-color: var(--gray);}table tbody tr{border-bottom: var(--border-width) solid var(--gray);transition: border-color .3s, background-color .3s;}table tbody tr:last-child{ border-bottom: 0 } table tbody tr:hover{ background-color: var(--gray) } /* - 蓝色风格 */table.fill thead{background-color: var(--primary);border-bottom: none;}table.fill thead tr{border-bottom: none;}table.fill thead th, table.fill thead td{color: #fff;}table.fill tbody tr{border-bottom: none;}table.fill tbody tr:nth-child(even) th, table.fill tbody tr:nth-child(even){background-color: #f7f7f7;}二、html调用代码
div classmythBox midh1项目列表/h1ulli手机/lili饮食ulli饮料/lili羊肉/lili方便面火腿肠/li/ul/lili旅行背包/lili帐篷/li/ulh1表格/h1div classmyth-table stylebackground-color: #f5fafd;tabletheadtrth姓名/thth性别/thth年龄/thth介绍/th/tr/theadtbodytrtd张三/tdtd女/tdtd23/tdtd职业法师擅长冰冻法术/td/trtrtd李四/tdtd男/tdtd25/tdtd野蛮人力大无穷。/td/trtrtd王五/tdtd男/tdtd23/tdtd战士擅长百步穿杨轻工一流。/td/tr/tbody/table/divbr/div classmyth-table stylebackground: #f7f7f7;table classfilltheadtrth姓名/thth性别/thth年龄/thth介绍/th/tr/theadtbodytrtd张三/tdtd女/tdtd23/tdtd职业法师擅长冰冻法术/td/trtrtd李四/tdtd男/tdtd25/tdtd野蛮人力大无穷。/td/trtrtd王五/tdtd男/tdtd23/tdtd战士擅长百步穿杨轻工一流。/td/tr/tbody/table/div/div三、最终效果
