Skip to content

Commit 60847fe

Browse files
alvinhuialvinhui
committed
update
1 parent d590f14 commit 60847fe

File tree

4 files changed

+116
-243
lines changed

4 files changed

+116
-243
lines changed

‎README.md

Lines changed: 73 additions & 202 deletions
Original file line numberDiff line numberDiff line change
@@ -17,250 +17,121 @@ __注意：__示例中以.ex开头的class在实际使用场景中是不必要
1717

1818
````html
1919
<div class="ui-table">
20-
<div class="ui-table-side">
20+
<div class="ui-table-wrap">
2121
<div class="ui-table-head">
22-
<div class="ui-table-column">
23-
<div class="ui-table-topitem">
24-
<div class="ui-table-item">
25-
<div class="ui-table-cont">
26-
<a href="">Setting</a>
27-
</div>
28-
</div>
29-
</div>
30-
</div>
31-
</div>
32-
<div class="ui-table-body">
3322
<div class="ui-table-column">
3423
<div class="ui-table-item">
35-
<div class="ui-table-cont">
36-
<div class="ex-user">
37-
Sidebar
24+
<div class="ui-table-item-main">
25+
<div class="ui-table-item-box">
26+
<div class="ui-table-item-center">
27+
<strong>
28+
Item
29+
</strong>
30+
</div>
3831
</div>
3932
</div>
4033
</div>
41-
</div>
42-
<div class="ui-table-column">
4334
<div class="ui-table-item">
44-
<div class="ui-table-cont">
45-
<div class="ex-user">
46-
Sidebar
35+
<div class="ui-table-item-main">
36+
<div class="ui-table-item-box">
37+
<div class="ui-table-item-center">
38+
<strong>
39+
Grade
40+
</strong>
41+
</div>
4742
</div>
4843
</div>
4944
</div>
50-
</div>
51-
<div class="ui-table-column">
5245
<div class="ui-table-item">
53-
<div class="ui-table-cont">
54-
<div class="ex-user">
55-
Sidebar
46+
<div class="ui-table-item-main">
47+
<div class="ui-table-item-box">
48+
<div class="ui-table-item-center">
49+
<strong>
50+
Mean
51+
</strong>
52+
</div>
5653
</div>
5754
</div>
5855
</div>
59-
</div>
60-
<div class="ui-table-column">
6156
<div class="ui-table-item">
62-
<div class="ui-table-cont">
63-
<div class="ex-user">
64-
Sidebar
57+
<div class="ui-table-item-main">
58+
<div class="ui-table-item-box">
59+
<div class="ui-table-item-center">
60+
<strong>
61+
Anelytics
62+
</strong>
63+
</div>
6564
</div>
6665
</div>
6766
</div>
68-
</div>
69-
<div class="ui-table-column">
7067
<div class="ui-table-item">
71-
<div class="ui-table-cont">
72-
<div class="ex-user">
73-
Sidebar
68+
<div class="ui-table-item-main">
69+
<div class="ui-table-item-box">
70+
<div class="ui-table-item-center">
71+
<strong>
72+
Notes
73+
</strong>
74+
</div>
7475
</div>
7576
</div>
7677
</div>
7778
</div>
7879
</div>
79-
</div>
80-
<div class="ui-table-main">
81-
<div class="ui-table-head" id="grade_nav">
80+
<div class="ui-table-body">
8281
<div class="ui-table-column">
83-
<div class="ui-table-topitem">
84-
<div class="ui-table-item">
85-
<div class="ui-table-cont">
86-
<div class="ex-item-head">
87-
<strong>Test 2</strong>
88-
<a href="">Set</a>
82+
<div class="ui-table-item">
83+
<div class="ui-table-item-main">
84+
<div class="ui-table-item-box">
85+
<div class="ui-table-item-center">
86+
<span>
87+
name
88+
</span>
8989
</div>
9090
</div>
9191
</div>
9292
</div>
93-
<div class="ui-table-topitem">
94-
<div class="ui-table-item">
95-
<div class="ui-table-cont">
96-
<div class="ex-item-head">
97-
<strong>Test 2</strong>
98-
<a href="">Set</a>
93+
<div class="ui-table-item">
94+
<div class="ui-table-item-main">
95+
<div class="ui-table-item-box">
96+
<div class="ui-table-item-center">
97+
<span>
98+
98
99+
</span>
99100
</div>
100101
</div>
101102
</div>
102103
</div>
103104
<div class="ui-table-item">
104-
<div class="ui-table-cont">
105-
<div class="ex-item-head">
106-
<strong>Test 2</strong>
107-
<a href="">Set</a>
108-
</div>
109-
</div>
110-
</div>
111-
<div class="ui-table-item">
112-
<div class="ui-table-cont">
113-
<div class="ex-item-head">
114-
<strong>Test 2</strong>
115-
<a href="">Set</a>
116-
</div>
117-
</div>
118-
</div>
119-
<div class="ui-table-topitem">
120-
<div class="ui-table-item">
121-
<div class="ui-table-cont">
122-
<div class="ex-item-head">
123-
<strong>Test 2</strong>
124-
<a href="">Set</a>
105+
<div class="ui-table-item-main">
106+
<div class="ui-table-item-box">
107+
<div class="ui-table-item-center">
108+
<strong>
109+
---
110+
</strong>
125111
</div>
126112
</div>
127113
</div>
128114
</div>
129-
</div>
130-
</div>
131-
<div class="ui-table-body">
132-
<div class="ui-table-column">
133-
<div class="ui-table-item">
134-
<div class="ui-table-cont">
135-
<span>12</span>
136-
</div>
137-
</div>
138-
<div class="ui-table-item">
139-
<div class="ui-table-cont">
140-
<span>22</span>
141-
</div>
142-
</div>
143-
<div class="ui-table-item">
144-
<div class="ui-table-cont">
145-
<span>33</span>
146-
</div>
147-
</div>
148-
<div class="ui-table-item">
149-
<div class="ui-table-cont">
150-
<span>55</span>
151-
</div>
152-
</div>
153-
<div class="ui-table-item">
154-
<div class="ui-table-cont">
155-
<span>66</span>
156-
</div>
157-
</div>
158-
</div>
159-
<div class="ui-table-column">
160-
<div class="ui-table-item">
161-
<div class="ui-table-cont">
162-
<span>12</span>
163-
</div>
164-
</div>
165-
<div class="ui-table-item">
166-
<div class="ui-table-cont">
167-
<span>22</span>
168-
</div>
169-
</div>
170-
<div class="ui-table-item">
171-
<div class="ui-table-cont">
172-
<span>33</span>
173-
</div>
174-
</div>
175-
<div class="ui-table-item">
176-
<div class="ui-table-cont">
177-
<span>55</span>
178-
</div>
179-
</div>
180-
<div class="ui-table-item">
181-
<div class="ui-table-cont">
182-
<span>66</span>
183-
</div>
184-
</div>
185-
</div>
186-
<div class="ui-table-column">
187-
<div class="ui-table-item">
188-
<div class="ui-table-cont">
189-
<span>12</span>
190-
</div>
191-
</div>
192115
<div class="ui-table-item">
193-
<div class="ui-table-cont">
194-
<span>22</span>
195-
</div>
196-
</div>
197-
<div class="ui-table-item">
198-
<div class="ui-table-cont">
199-
<span>33</span>
200-
</div>
201-
</div>
202-
<div class="ui-table-item">
203-
<div class="ui-table-cont">
204-
<span>55</span>
205-
</div>
206-
</div>
207-
<div class="ui-table-item">
208-
<div class="ui-table-cont">
209-
<span>66</span>
210-
</div>
211-
</div>
212-
</div>
213-
<div class="ui-table-column">
214-
<div class="ui-table-item">
215-
<div class="ui-table-cont">
216-
<span>12</span>
217-
</div>
218-
</div>
219-
<div class="ui-table-item">
220-
<div class="ui-table-cont">
221-
<span>22</span>
222-
</div>
223-
</div>
224-
<div class="ui-table-item">
225-
<div class="ui-table-cont">
226-
<span>33</span>
227-
</div>
228-
</div>
229-
<div class="ui-table-item">
230-
<div class="ui-table-cont">
231-
<span>55</span>
232-
</div>
233-
</div>
234-
<div class="ui-table-item">
235-
<div class="ui-table-cont">
236-
<span>66</span>
237-
</div>
238-
</div>
239-
</div>
240-
<div class="ui-table-column">
241-
<div class="ui-table-item">
242-
<div class="ui-table-cont">
243-
<span>12</span>
244-
</div>
245-
</div>
246-
<div class="ui-table-item">
247-
<div class="ui-table-cont">
248-
<span>22</span>
249-
</div>
250-
</div>
251-
<div class="ui-table-item">
252-
<div class="ui-table-cont">
253-
<span>33</span>
254-
</div>
255-
</div>
256-
<div class="ui-table-item">
257-
<div class="ui-table-cont">
258-
<span>55</span>
116+
<div class="ui-table-item-main">
117+
<div class="ui-table-item-box">
118+
<div class="ui-table-item-center">
119+
<div >
120+
---
121+
</div>
122+
</div>
123+
</div>
259124
</div>
260125
</div>
261126
<div class="ui-table-item">
262-
<div class="ui-table-cont">
263-
<span>66</span>
127+
<div class="ui-table-item-main">
128+
<div class="ui-table-item-box">
129+
<div class="ui-table-item-center">
130+
<span>
131+
---
132+
</span>
133+
</div>
134+
</div>
264135
</div>
265136
</div>
266137
</div>

‎dist/table-debug.css

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
/* chopper.table 样式模块 */
33

44
.ui-table{
5-
border-top: 1px solid #ccc;
6-
border-left: 1px solid #ccc;
75
display: inline-block;
6+
overflow-x: auto;
87
}
98

109
.ui-table-side,
@@ -25,40 +24,42 @@
2524
clear: both;
2625
}
2726

28-
.ui-table-column{
29-
border-bottom: 1px solid #ccc;
27+
.ui-table-side{
28+
29+
}
30+
.ui-table-main{
31+
3032
}
3133

32-
.ui-table-head .ui-table-topitem .ui-table-top{
33-
height: 50%;
34+
.ui-table-column .ui-table-item:first-child{
35+
border-left: 1px solid #ccc;
3436
}
35-
.ui-table-head .ui-table-topitem .ui-table-middle{
36-
height: 50%;
37+
.ui-table-column .ui-table-side .ui-table-item:last-child{
38+
border-right: 0 none;
3739
}
38-
.ui-table-head .ui-table-topitem .ui-table-top .ui-table-item{
39-
width: 100%;
40-
border-bottom: 1px solid #ccc;
40+
.ui-table-head .ui-table-item{
41+
border-top: 1px solid #ccc;
4142
}
4243

43-
.ui-table-topitem{
44-
height: 100%;
45-
}
4644
.ui-table-item{
4745
border-right: 1px solid #ccc;
48-
width: 100px;
49-
display: table;
50-
height: 100%;
51-
box-sizing: border-box;
46+
border-bottom: 1px solid #ccc;
47+
-webkit-box-sizing: border-box;
5248
-moz-box-sizing: border-box;
5349
box-sizing: border-box;
5450
padding: 5px;
51+
display: table;
5552
}
56-
.ui-table-cont{
53+
.ui-table-item-main{
5754
display: table-cell;
5855
text-align: center;
5956
vertical-align: middle;
6057
}
61-
.ui-table-cont > *{
58+
.ui-table-item-box{
59+
width: 100px;
60+
}
61+
.ui-table-item-center{
6262
display: inline-block;
6363
text-align: left;
64+
max-width: 100%;
6465
}

‎dist/table.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)