【用JS自制表格软件玩数据】1.页面布局

妇男主任

已于 2022-01-26 23:31:48 修改

阅读量631

点赞数 4

分类专栏： javascript 文章标签： excel javascript

于 2022-01-13 11:12:25 首次发布

本文链接：https://blog.csdn.net/weixin_46596227/article/details/122464513

版权

javascript 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

页面布局

简要介绍
界面
css布局
把源码贴出来：
- index.html
- style.css

当写完本系列后，我会把源代码分享出来给大家。本课程也会持续更新与矫正。欢迎留言指正！

简要介绍

之所以要开这个课程，因为本人是重度表格用户。又因为网上很多办公套件都是商业版的，做了很多限制，即使是付费用户，也没办法定制出更加自由的数据处理功能，所以，就打算自己做一个，并免费分享出来。

界面

自己排版比较麻烦，所以在网上找了个不错的模板。感谢作者¹的辛苦付出。下载地址在这里：https://codepen.io/oliviale/pen/rPjgmB
在这里插入图片描述
下载好稿之后，我做了一些调整。

css布局

布局中的重点部分的解析

.cells {
  position: relative;
  display: grid;
  grid-template-columns: 40px repeat(11, calc((100% - 50px) / 11));
  grid-template-rows: repeat(21, 25px);
  grid-gap: 1px;
  background: #cdcdcd;
  grid-auto-flow: dense;
  max-width: 100%;
  overflow: hidden;
}

上面的 cells 样式类，代表单元格的排版样式。

display: grid;

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。

我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。声明 display：grid 则该容器是一个块级元素，设置成 display: inline-grid 则容器元素为行内元素

grid-template-columns

grid-template-columns 规定网格布局中的列数（和宽度）。

可用的参数有：

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

值	描述
none	默认值，不指定列的大小。
auto	列的大小由容器的大小和列中网格元素内容的大小决定。
max-content	每列的大小设置为该列中最大网格元素的大小。
min-content	每列的大小设置为该列中最小网格元素的大小。
length	长度值，可以是 px 为单位的数值或百分比 %。 0 是默认值。了解更多长度单位。
initial	将此属性设置为默认值。
inherit	从父元素继承该属性。

grid-template-rows

grid-template-rows用于设置网格布局中的行数及高度。

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

值	描述
none	默认值，不指定行的大小。
auto	行的大小由容器的大小和行中网格元素内容的大小决定。
max-content	每行的大小设置为该行中最大网格元素的大小。
min-content	每行的大小设置为该行中最小网格元素的大小。
length	长度值，可以是 px 为单位的数值或百分比 %。 0 是默认值。了解更多长度单位。
initial	将此属性设置为默认值。
inherit	从父元素继承该属性。

把源码贴出来：

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Book1 - Excel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="main-content">
  <div class="title">Book1 - Excel</div>
  <div class="menu-bar">
    <div><span>文件</span></div>
    <div><span>首页</span></div>
    <div><span>插入</span></div>
    <div><span>数据</span></div>
    <div><span>查看</span></div>
    <div><span>帮助</span></div>
    <div><span>我的账户</span></div>
  </div>
  <div class="icon-bar">
    <div class="icon-bar__clipboard">
      <div class="icon-paste">
        <div class="icon"></div><span>粘贴</span>
      </div>
      <div class="icon icon-cut"></div>
      <div class="icon icon-copy"></div>
      <div class="icon-bar__name">剪贴板</div>
    </div>
    <div class="icon-bar__font">
      <select class="font-name">
        <option selected="selected">Noto Sans</option>
        <option style="--font:Arial">Arial</option>
        <option style="--font:Calibri">Calibri</option>
        <option style="--font:Comic Sans MS">Comic Sans MS</option>
        <option style="--font:Courier New">Courier New</option>
        <option style="--font:Impact">Impact</option>
        <option style="--font:Georgia">Georgia</option>
        <option style="--font:Garamond">Garamond</option>
        <option style="--font:Lato">Lato</option>
        <option style="--font:Open Sans">Open Sans</option>
        <option style="--font:Palatino">Palatino</option>
        <option style="--font:Verdana">Verdana</option>
      </select>
      <select class="font-size">
        <option selected="selected">14</option>
        <option>16</option>
        <option>18</option>
        <option>20</option>
        <option>22</option>
        <option>24</option>
        <option>26</option>
        <option>28</option>
        <option>36</option>
        <option>48</option>
        <option>72</option>
      </select>
      <div class="icon icon-bold"></div>
      <div class="icon icon-italic"></div>
      <div class="icon icon-underline"></div>
      <div class="icon icon-border"></div>
      <div class="icon icon-fill"></div>
      <div class="icon icon-color"></div>
      <div class="icon-bar__name">字体</div>
    </div>
    <div class="icon-bar__alignment">
      <div class="icon icon-alignt"></div>
      <div class="icon icon-alignm"></div>
      <div class="icon icon-alignb"></div>
      <div class="icon icon-orientation"></div>
      <div class="icon icon-alignl"></div>
      <div class="icon icon-alignc"></div>
      <div class="icon icon-alignr"></div>
      <div class="icon icon-indentinc"></div>
      <div class="icon icon-indentdec"></div>
      <div class="wrap-text">
        <div class="icon"></div><span>字体换行</span>
      </div>
      <div class="merge-center">
        <div class="icon"></div><span>合并与居中</span>
      </div>
      <div class="icon-bar__name">定位</div>
    </div>
    <div class="icon-bar__number">
      <select class="number-format">
        <option>General</option>
        <option>Number</option>
        <option>Currency</option>
        <option>Accounting</option>
        <option>Short Date</option>
        <option>Long Date</option>
        <option>Time</option>
        <option>Currency</option>
        <option>Percentage</option>
      </select>
      <div class="icon icon-acc"></div>
      <div class="icon icon-percent"></div>
      <div class="icon icon-comma"></div>
      <div class="icon icon-decimalinc"></div>
      <div class="icon icon-decimaldec"></div>
      <div class="icon-bar__name">数字</div>
    </div>
    <div class="icon-bar__styles">
      <div class="conditional">
        <div class="icon"></div>
      </div>
      <div class="format-table">
        <div class="icon"></div>
      </div>
      <div class="cell-style">
        <div class="icon"></div>
      </div>
      <div class="icon-desc">条件格式</div>
      <div class="icon-desc">格式化为表格</div>
      <div class="icon-desc">单元格样式</div>
      <div class="icon-bar__name">样式</div>
    </div>
    <div class="icon-bar__cells">
      <div class="cell-insert"> 
        <div class="icon"></div>
      </div>
      <div class="cell-delete">
        <div class="icon"></div>
      </div>
      <div class="cell-format">
        <div class="icon"></div>
      </div>
      <div class="icon-desc">插入</div>
      <div class="icon-desc">删除</div>
      <div class="icon-desc">格式化</div>
      <div class="icon-bar__name">Cells</div>
    </div>
  </div>
  <div class="cell-content">
    <div>fx</div>
    <div></div>
  </div>
  <div class="cells">
    <div class="cells__spacer"></div>
    <div class="cells__alphabet">A</div>
    <div class="cells__alphabet">B</div>
    <div class="cells__alphabet">C</div>
    <div class="cells__alphabet">D</div>
    <div class="cells__alphabet">E</div>
    <div class="cells__alphabet">F</div>
    <div class="cells__alphabet">G</div>
    <div class="cells__alphabet">H</div>
    <div class="cells__alphabet">I</div>
    <div class="cells__alphabet">J</div>
    <div class="cells__alphabet">K</div>
    <div class="cells__number">1</div>
    <div class="cells__number">2</div>
    <div class="cells__number">3</div>
    <div class="cells__number">4</div>
    <div class="cells__number">5</div>
    <div class="cells__number">6</div>
    <div class="cells__number">7</div>
    <div class="cells__number">8</div>
    <div class="cells__number">9</div>
    <div class="cells__number">10</div>
    <div class="cells__number">11</div>
    <div class="cells__number">12</div>
    <div class="cells__number">13</div>
    <div class="cells__number">14</div>
    <div class="cells__number">15</div>
    <div class="cells__number">16</div>
    <div class="cells__number">17</div>
    <div class="cells__number">18</div>
    <div class="cells__number">19</div>
    <div class="cells__number">20</div>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="cells__input"/>
    <input class="input__explanation" value="点我编辑文本 👉🏻"/>
    <div class="input__see-more"><a href="https://codepen.io/collection/DQvYpQ/" target="_blank">点击我打开官网!</a></div>
    <div class="input__sm-1"><a href="https://twitter.com/meowlivia_" target="_blank">Twitter</a></div>
    <div class="input__sm-2"><a href="https://github.com/oliviale" target="_blank">GitHub</a></div>
    <div class="input__sm-3"><a href="https://dribbble.com/oliviale" target="_blank">Dribbble</a></div>
  </div>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
</body>
</html>

style.css

* {
  box-sizing: border-box;
}

body {
  background: #fff;
  font-family: "Noto Sans", sans-serif;
  color: #444;
  font-size: 14px;
}

aside.context {
  text-align: center;
  color: #333;
  line-height: 1.7;
}
aside.context a {
  text-decoration: none;
  color: #333;
  padding: 3px 0;
  border-bottom: 1px dashed;
}
aside.context a:hover {
  border-bottom: 1px solid;
}
aside.context .explanation {
  max-width: 700px;
  margin: 6em auto 0;
}

footer {
  text-align: center;
  margin: 4em auto;
  width: 100%;
}
footer a {
  text-decoration: none;
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: transparent;
  border: 1px dashed #333;
  color: #333;
  margin: 5px;
}
footer a:hover {
  background: rgba(255, 255, 255, 0.1);
}
footer a .icons {
  margin-top: 12px;
  display: inline-block;
  font-size: 20px;
}

.main-content {
  display: grid;
  min-height: 100vh;
  grid-template-rows: repeat(2, 45px) 115px 60px auto;
  max-width: 100%;
}
.main-content > div {
  max-width: 100%;
}

.title {
  background: #217346;
  text-align: center;
  display: grid;
  place-content: center;
  color: #fff;
}

.menu-bar {
  display: grid;
  grid-template-columns: repeat(10, max-content);
  padding: 15px;
  grid-gap: 30px;
  background: #f3f2f1;
}
.menu-bar div:nth-child(2) span {
  display: inline-block;
  position: relative;
  border-bottom: 5px solid #217346;
  padding-bottom: 6px;
  font-weight: 700;
}

.cell-content {
  border: 1px solid #e6e6e6;
  background: #e6e6e6;
  display: grid;
  padding: 10px;
  grid-template-columns: 50px auto;
}
.cell-content div {
  border: 1px solid #cdcdcd;
  background: #fff;
  display: flex;
  align-items: center;
}
.cell-content div:nth-child(1) {
  justify-content: center;
  color: #999;
  font: italic 700 18px "Merriweather", serif;
  border-right: none;
}

.cells {
  position: relative;
  display: grid;
  grid-template-columns: 40px repeat(11, calc((100% - 50px) / 11));
  grid-template-rows: repeat(21, 25px);
  grid-gap: 1px;
  background: #cdcdcd;
  grid-auto-flow: dense;
  max-width: 100%;
  overflow: hidden;
}
.cells__spacer {
  background: #e6e6e6;
  position: relative;
}
.cells__spacer:after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  height: 80%;
  width: 100%;
  background: linear-gradient(135deg, transparent 30px, #bbb 30px, #bbb 55px, transparent 55px);
}
.cells__alphabet {
  background: #e6e6e6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cells__number {
  background: #e6e6e6;
  grid-column: 1/span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cells__input {
  border: none;
  padding: 0 6px;
}
.cells input, .cells button {
  border: none;
  background: #fff;
  padding: 0 6px;
  font-family: "Noto Sans", sans-serif;
}

.input__explanation {
  grid-column: 3/span 2;
  grid-row: 15;
}
.input__see-more {
  grid-column: 5;
  grid-row: 15;
  text-align: left;
  padding: 6px;
  background: #fff;
}
.input__sm-1, .input__sm-2, .input__sm-3 {
  text-align: center;
  padding: 6px;
  grid-row: 15;
  background: #fff;
}
.input__sm-1 {
  grid-column: 8;
}
.input__sm-2 {
  grid-column: 9;
}
.input__sm-3 {
  grid-column: 10;
}

.icon-bar {
  background: #f3f2f1;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  display: grid;
  padding: 10px 15px;
  grid-template-columns: repeat(6, max-content);
  grid-template-rows: auto 35px;
  grid-auto-flow: dense;
}
.icon-bar > div {
  display: grid;
  grid-template-rows: repeat(2, 30px) 30px;
  border-right: 1px solid #cdcdcd;
  grid-gap: 5px;
}
.icon-bar__name {
  font-size: 12px;
  text-align: center;
  align-self: end;
  margin-bottom: 3px;
}
.icon-bar .icon-desc {
  margin-top: 5px;
  line-height: 1.15;
  font-size: 13px;
}
.icon-bar .icon {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/spriteExcel.png);
}

.icon-bar__clipboard {
  grid-template-columns: 50px 30px;
  padding-right: 10px;
}
.icon-bar__clipboard .icon-bar__name {
  grid-column: 1/span 2;
}
.icon-bar__clipboard .icon-paste {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  grid-row: 1/span 2;
}
.icon-bar__clipboard .icon-paste .icon {
  background-position: -30px -60px;
  height: 45px;
  width: 100%;
}
.icon-bar__clipboard .icon-paste span {
  margin-top: 5px;
  display: block;
}
.icon-bar__clipboard .icon-cut {
  background-position: 0 0;
}
.icon-bar__clipboard .icon-copy {
  background-position: -30px 0;
}

.icon-bar__font {
  padding: 0 10px;
  grid-template-columns: repeat(3, 30px) 40px repeat(2, 30px);
  justify-content: space-around;
}
.icon-bar__font .icon-bar__name {
  grid-column: 1/span 5;
}
.icon-bar__font select {
  height: 25px;
}
.icon-bar__font select:nth-child(1) {
  grid-column: 1/span 4;
}
.icon-bar__font select:nth-child(1) option {
  font-family: var(--font);
}
.icon-bar__font select:nth-child(2) {
  margin-left: -6px;
  grid-column: 5/span 2;
}
.icon-bar__font .icon-bold {
  background-position: -30px -150px;
}
.icon-bar__font .icon-italic {
  background-position: -60px -150px;
}
.icon-bar__font .icon-underline {
  background-position: -90px -150px;
  border-right: 1px solid #cdcdcd;
  margin-right: -2px;
}
.icon-bar__font .icon-border {
  background-position: -60px 0;
  margin: 0 5px;
}
.icon-bar__font .icon-fill {
  background-position: -90px 0;
  border-left: 1px solid #cdcdcd;
  margin-left: -2px;
}
.icon-bar__font .icon-color {
  background-position: -120px 0;
}

.icon-bar__alignment {
  padding: 0 10px;
  grid-template-columns: repeat(5, 30px) 160px;
}
.icon-bar__alignment .icon-bar__name {
  grid-column: 1/span 6;
}
.icon-bar__alignment .icon-alignt {
  background-position: -150px 0;
}
.icon-bar__alignment .icon-alignm {
  background-position: -180px 0;
}
.icon-bar__alignment .icon-alignb {
  background-position: -210px 0;
}
.icon-bar__alignment .icon-orientation {
  background-position: -240px 0;
  border-left: 1px solid #cdcdcd;
}
.icon-bar__alignment .icon-alignl {
  background-position: 0 -30px;
  grid-column: 1;
}
.icon-bar__alignment .icon-alignc {
  background-position: -30px -30px;
}
.icon-bar__alignment .icon-alignr {
  background-position: -60px -30px;
}
.icon-bar__alignment .icon-indentinc {
  background-position: -90px -30px;
  border-left: 1px solid #cdcdcd;
}
.icon-bar__alignment .icon-indentdec {
  background-position: -120px -30px;
}
.icon-bar__alignment .wrap-text, .icon-bar__alignment .merge-center {
  grid-column: 6;
  border-left: 1px solid #cdcdcd;
  padding-left: 5px;
  display: flex;
  align-items: center;
}
.icon-bar__alignment .wrap-text .icon, .icon-bar__alignment .merge-center .icon {
  width: 30px;
  height: 30px;
}
.icon-bar__alignment .wrap-text span, .icon-bar__alignment .merge-center span {
  display: block;
  padding-left: 5px;
}
.icon-bar__alignment .wrap-text {
  grid-row: 1;
}
.icon-bar__alignment .wrap-text .icon {
  background-position: -270px 0;
}
.icon-bar__alignment .merge-center .icon {
  background-position: -150px -30px;
}

.icon-bar__number {
  grid-template-columns: repeat(5, 30px);
  padding: 0 10px;
}
.icon-bar__number select {
  grid-column: span 5;
  height: 25px;
}
.icon-bar__number .icon-acc {
  background-position: -180px -30px;
}
.icon-bar__number .icon-percent {
  background-position: -210px -30px;
}
.icon-bar__number .icon-comma {
  background-position: -240px -30px;
}
.icon-bar__number .icon-decimalinc {
  background-position: -270px -30px;
  border-left: 1px solid #cdcdcd;
}
.icon-bar__number .icon-decimaldec {
  background-position: 0 -60px;
}
.icon-bar__number .icon-bar__name {
  grid-column: span 5;
}

.icon-bar__styles {
  grid-template-columns: 80px 70px 60px;
  padding: 0 10px;
  text-align: center;
}
.icon-bar__styles .icon-bar__name {
  grid-column: span 3;
}
.icon-bar__styles .icon {
  width: 45px;
  height: 45px;
  margin: -8px auto 5px;
}
.icon-bar__styles .conditional .icon {
  background-position: -75px -60px;
}
.icon-bar__styles .format-table .icon {
  background-position: -120px -60px;
}
.icon-bar__styles .cell-style .icon {
  background-position: -165px -60px;
}

.icon-bar__cells {
  grid-template-columns: repeat(3, 50px);
  padding: 0 10px;
  text-align: center;
}
.icon-bar__cells .icon-bar__name {
  grid-column: span 3;
}
.icon-bar__cells .icon {
  width: 45px;
  height: 45px;
  margin: -8px auto 5px;
}
.icon-bar__cells .cell-insert .icon {
  background-position: -210px -60px;
}
.icon-bar__cells .cell-delete .icon {
  background-position: -255px -60px;
}
.icon-bar__cells .cell-format .icon {
  background-position: -30px -105px;
}

排版样式

模板原稿：https://codepen.io/oliviale/pen/rPjgmB ↩︎

妇男主任

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
【用JS自制表格软件玩数据】1.页面布局

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。
复制链接

扫一扫