发表于 | 分类于

#前言 最近有个需求,渲染一个很复杂的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>
阅读全文 »

发表于 | 分类于

之前手上的Typecho站点使用了MIP插件，但是百度MIP已经下线。这个MIP插件可以让MIP链接只给搜索引擎查看，用户直接跳转普通页面，这也是坑的所在之处，这个跳转用的时302跳转，会导致搜索引擎一直收录MIP页面(并且IOS某些浏览器会自动拦截302跳转，导致打开空白)，需要修改一丢丢地方，实现301。

阅读全文 »

发表于 | 分类于

普通的Win 10设置完毕后可以直接在应用商店中安装自己喜欢的发行版，但是LTSC并没有应用商店,所以稍微麻烦点，Win10 LTSC 2019对应正常的Win10 1809版本。相比之前的LTSB 2016(对应Win10 1607),这个版本有3年的跨度，在此期间linux子系统的改进很多。因而很多之前的方法已经不适用了。下面我一步一步来启用我们Win10 LTSC 2019的Linux子系统。

阅读全文 »