发表于 | 分类于

简洁清爽的代码风格应该是大多数工程师所期待的。在工作中笔者常常因为起名字而纠结，命名已经成为我工作中的拦路虎，夸张点可以说是编程5分钟，命名两小时！

阅读全文 »

发表于 | 分类于

#起因 今天准备在服务器安装哪吒探针,发现docker安装失败(服务器访问国外docker太慢超时) QQ图片20201225100651.png 然后想到宝塔后台可以一键安装docker,就立马登录宝塔安装docker,发现docker是安装成功了,但是启动不了 QQ图片20201225100805.png 又跑去看docker的安装日志,发现宝塔的一键脚本会调用很多yum安装各种依赖,但是报错了 QQ图片20201225100944.png #解决 腾讯云服务器使用yum安装部分依赖会出现类似如下错误：

阅读全文 »

发表于 | 分类于

目录

阅读全文 »

发表于 | 分类于

#前言 最近有个需求,渲染一个很复杂的table表格,不能用框架实现,使用原生table数据量一大就看不到表头需要固定表头,本篇文章当备份吧 #代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    <html lang="zh-CN" class=""><head>
    
        <meta charset="UTF-8">
        <title>CodePen Demo</title>
    
        <style>
      .table-container {
        width: 50%;
        height: 200px;
        border: solid 1px #cccccc;
        margin: 10px auto;
        background: #FFF;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        position: absolute;
        top: 50%;
        left: 50%;
        padding-top: 50px;
        overflow: hidden;
      }
    
      .table-container-inner {
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
      }
    
      .table-header-fixed {
        width: 100%;
        background: #FFF;
        overflow-x: hidden;
        overflow-y: auto;
      }
    
      th, td, span {
        text-align: left;
      }
    
      th span {
        position: absolute;
        top: 0;
        width: 100%;
        display: block;
        line-height: 50px;
        border-left: solid 1px #3a84ac;
        border-bottom: solid 1px #cccccc;
        padding-left: 5px;
        margin-left: -5px;
        font-weight: 400;
        letter-spacing: 1px;
        color: #FFF;
        background: #549DC5;
      }
    
        </style>
    
      </head>
    
      <body>
        <div class="container" role="main">
        <center>
          <h1>CSS - Fixed Header With Variable Width Table</h1>
        </center>
        <div class="table-container">
          <div class="table-container-inner">
            <table class="table-header-fixed">
              <thead>
                <tr>
                  <th>
                    <span>First</span>
                  </th>
                  <th>
                    <span>Second</span>
                  </th>
                  <th>
                    <span>Third</span>
                  </th>
                  <th>
                    <span>Forth</span>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second222222222222222222222222222</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
              </tbody>
            </table>
          </div><!-- /fixed-table-container-inner -->
        </div><!-- /fixed-table-container -->
      </div><!-- /container -->
    
      </html>
阅读全文 »