├── README.md
├── images
├── Alex Gonley.jpg
├── Alson GC.jpg
├── Jeet Saru.jpg
├── Sarita Limbu.jpg
├── Sonal Gharti.jpg
├── Zinzu Chan Lee.jpg
├── csv.png
├── excel.png
├── export.png
├── html_table.jpg
├── json.png
├── pdf.png
├── screenshot.jpg
└── search.png
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Responsive HTML Table With Pure CSS - Web Design UI Design
2 | 
3 | Without using CSS frameworks we'll build **Responsive HTML Table**. So, with pure CSS I'll show you how to create **Glassmorphism Responsive HTML Table**. Let's take UI design to next level.
4 |
5 | Code written by:
6 | 👨🏻⚕️ Coding Design (Jeet Saru)
7 |
8 | > You can do whatever you want with the code. However if you love my content,
9 | > you can **SUBSCRIBED** my YouTube Channel.
10 |
11 | 🌎link: www.youtube.com/codingdesign
12 |
--------------------------------------------------------------------------------
/images/Alex Gonley.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/Alex Gonley.jpg
--------------------------------------------------------------------------------
/images/Alson GC.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/Alson GC.jpg
--------------------------------------------------------------------------------
/images/Jeet Saru.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/Jeet Saru.jpg
--------------------------------------------------------------------------------
/images/Sarita Limbu.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/Sarita Limbu.jpg
--------------------------------------------------------------------------------
/images/Sonal Gharti.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/Sonal Gharti.jpg
--------------------------------------------------------------------------------
/images/Zinzu Chan Lee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/Zinzu Chan Lee.jpg
--------------------------------------------------------------------------------
/images/csv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/csv.png
--------------------------------------------------------------------------------
/images/excel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/excel.png
--------------------------------------------------------------------------------
/images/export.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/export.png
--------------------------------------------------------------------------------
/images/html_table.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/html_table.jpg
--------------------------------------------------------------------------------
/images/json.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/json.png
--------------------------------------------------------------------------------
/images/pdf.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/pdf.png
--------------------------------------------------------------------------------
/images/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/screenshot.jpg
--------------------------------------------------------------------------------
/images/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/05ef4ef450b6ce6cb760d8dfdef246416398b132/images/search.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Convert | Export html Table to CSV & EXCEL File
19 |
20 |
21 |
22 |
23 |
24 |
42 |
43 |
44 |
45 |
46 | | Id ↑ |
47 | Customer ↑ |
48 | Location ↑ |
49 | Order Date ↑ |
50 | Status ↑ |
51 | Amount ↑ |
52 |
53 |
54 |
55 |
56 | | 1 |
57 |  Zinzu Chan Lee |
58 | Seoul |
59 | 17 Dec, 2022 |
60 |
61 | Delivered
62 | |
63 | $128.90 |
64 |
65 |
66 | | 2 |
67 |  Jeet Saru |
68 | Kathmandu |
69 | 27 Aug, 2023 |
70 |
71 | Cancelled
72 | |
73 | $5350.50 |
74 |
75 |
76 | | 3 |
77 |  Sonal Gharti |
78 | Tokyo |
79 | 14 Mar, 2023 |
80 |
81 | Shipped
82 | |
83 | $210.40 |
84 |
85 |
86 | | 4 |
87 |  Alson GC |
88 | New Delhi |
89 | 25 May, 2023 |
90 |
91 | Delivered
92 | |
93 | $149.70 |
94 |
95 |
96 | | 5 |
97 |  Sarita Limbu |
98 | Paris |
99 | 23 Apr, 2023 |
100 |
101 | Pending
102 | |
103 | $399.99 |
104 |
105 |
106 | | 6 |
107 |  Alex Gonley |
108 | London |
109 | 23 Apr, 2023 |
110 |
111 | Cancelled
112 | |
113 | $399.99 |
114 |
115 |
116 | | 7 |
117 | Jeet Saru |
118 | New York |
119 | 20 May, 2023 |
120 |
121 | Delivered
122 | |
123 | $399.99 |
124 |
125 |
126 | | 8 |
127 | Aayat Ali Khan |
128 | Islamabad |
129 | 30 Feb, 2023 |
130 |
131 | Pending
132 | |
133 | $149.70 |
134 |
135 |
136 | | 9 |
137 | Alson GC |
138 | Dhaka |
139 | 22 Dec, 2023 |
140 |
141 | Cancelled
142 | |
143 | $249.99 |
144 |
145 |
146 | | 9 |
147 | Alson GC |
148 | Dhaka |
149 | 22 Dec, 2023 |
150 |
151 | Cancelled
152 | |
153 | $249.99 |
154 |
155 |
156 | | 9 |
157 | Alson GC |
158 | Dhaka |
159 | 22 Dec, 2023 |
160 |
161 | Cancelled
162 | |
163 | $249.99 |
164 |
165 |
166 | | 9 |
167 | Alson GC |
168 | Dhaka |
169 | 22 Dec, 2023 |
170 |
171 | Cancelled
172 | |
173 | $249.99 |
174 |
175 |
176 | | 9 |
177 | Alson GC |
178 | Dhaka |
179 | 22 Dec, 2023 |
180 |
181 | Cancelled
182 | |
183 | $249.99 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | /**
2 | Responsive HTML Table With Pure CSS - Web Design/UI Design
3 |
4 | Code written by:
5 | 👨🏻⚕️ @Coding Design (Jeet Saru)
6 |
7 | > You can do whatever you want with the code. However if you love my content, you can **SUBSCRIBED** my YouTube Channel.
8 |
9 | 🌎link: www.youtube.com/codingdesign
10 | */
11 |
12 | const search = document.querySelector('.input-group input'),
13 | table_rows = document.querySelectorAll('tbody tr'),
14 | table_headings = document.querySelectorAll('thead th');
15 |
16 | // 1. Searching for specific data of HTML table
17 | search.addEventListener('input', searchTable);
18 |
19 | function searchTable() {
20 | table_rows.forEach((row, i) => {
21 | let table_data = row.textContent.toLowerCase(),
22 | search_data = search.value.toLowerCase();
23 |
24 | row.classList.toggle('hide', table_data.indexOf(search_data) < 0);
25 | row.style.setProperty('--delay', i / 25 + 's');
26 | })
27 |
28 | document.querySelectorAll('tbody tr:not(.hide)').forEach((visible_row, i) => {
29 | visible_row.style.backgroundColor = (i % 2 == 0) ? 'transparent' : '#0000000b';
30 | });
31 | }
32 |
33 | // 2. Sorting | Ordering data of HTML table
34 |
35 | table_headings.forEach((head, i) => {
36 | let sort_asc = true;
37 | head.onclick = () => {
38 | table_headings.forEach(head => head.classList.remove('active'));
39 | head.classList.add('active');
40 |
41 | document.querySelectorAll('td').forEach(td => td.classList.remove('active'));
42 | table_rows.forEach(row => {
43 | row.querySelectorAll('td')[i].classList.add('active');
44 | })
45 |
46 | head.classList.toggle('asc', sort_asc);
47 | sort_asc = head.classList.contains('asc') ? false : true;
48 |
49 | sortTable(i, sort_asc);
50 | }
51 | })
52 |
53 |
54 | function sortTable(column, sort_asc) {
55 | [...table_rows].sort((a, b) => {
56 | let first_row = a.querySelectorAll('td')[column].textContent.toLowerCase(),
57 | second_row = b.querySelectorAll('td')[column].textContent.toLowerCase();
58 |
59 | return sort_asc ? (first_row < second_row ? 1 : -1) : (first_row < second_row ? -1 : 1);
60 | })
61 | .map(sorted_row => document.querySelector('tbody').appendChild(sorted_row));
62 | }
63 |
64 | // 3. Converting HTML table to PDF
65 |
66 | const pdf_btn = document.querySelector('#toPDF');
67 | const customers_table = document.querySelector('#customers_table');
68 |
69 |
70 | const toPDF = function (customers_table) {
71 | const html_code = `
72 |
73 |
74 | ${customers_table.innerHTML}`;
75 |
76 | const new_window = window.open();
77 | new_window.document.write(html_code);
78 |
79 | setTimeout(() => {
80 | new_window.print();
81 | new_window.close();
82 | }, 400);
83 | }
84 |
85 | pdf_btn.onclick = () => {
86 | toPDF(customers_table);
87 | }
88 |
89 | // 4. Converting HTML table to JSON
90 |
91 | const json_btn = document.querySelector('#toJSON');
92 |
93 | const toJSON = function (table) {
94 | let table_data = [],
95 | t_head = [],
96 |
97 | t_headings = table.querySelectorAll('th'),
98 | t_rows = table.querySelectorAll('tbody tr');
99 |
100 | for (let t_heading of t_headings) {
101 | let actual_head = t_heading.textContent.trim().split(' ');
102 |
103 | t_head.push(actual_head.splice(0, actual_head.length - 1).join(' ').toLowerCase());
104 | }
105 |
106 | t_rows.forEach(row => {
107 | const row_object = {},
108 | t_cells = row.querySelectorAll('td');
109 |
110 | t_cells.forEach((t_cell, cell_index) => {
111 | const img = t_cell.querySelector('img');
112 | if (img) {
113 | row_object['customer image'] = decodeURIComponent(img.src);
114 | }
115 | row_object[t_head[cell_index]] = t_cell.textContent.trim();
116 | })
117 | table_data.push(row_object);
118 | })
119 |
120 | return JSON.stringify(table_data, null, 4);
121 | }
122 |
123 | json_btn.onclick = () => {
124 | const json = toJSON(customers_table);
125 | downloadFile(json, 'json')
126 | }
127 |
128 | // 5. Converting HTML table to CSV File
129 |
130 | const csv_btn = document.querySelector('#toCSV');
131 |
132 | const toCSV = function (table) {
133 | // Code For SIMPLE TABLE
134 | // const t_rows = table.querySelectorAll('tr');
135 | // return [...t_rows].map(row => {
136 | // const cells = row.querySelectorAll('th, td');
137 | // return [...cells].map(cell => cell.textContent.trim()).join(',');
138 | // }).join('\n');
139 |
140 | const t_heads = table.querySelectorAll('th'),
141 | tbody_rows = table.querySelectorAll('tbody tr');
142 |
143 | const headings = [...t_heads].map(head => {
144 | let actual_head = head.textContent.trim().split(' ');
145 | return actual_head.splice(0, actual_head.length - 1).join(' ').toLowerCase();
146 | }).join(',') + ',' + 'image name';
147 |
148 | const table_data = [...tbody_rows].map(row => {
149 | const cells = row.querySelectorAll('td'),
150 | img = decodeURIComponent(row.querySelector('img').src),
151 | data_without_img = [...cells].map(cell => cell.textContent.replace(/,/g, ".").trim()).join(',');
152 |
153 | return data_without_img + ',' + img;
154 | }).join('\n');
155 |
156 | return headings + '\n' + table_data;
157 | }
158 |
159 | csv_btn.onclick = () => {
160 | const csv = toCSV(customers_table);
161 | downloadFile(csv, 'csv', 'customer orders');
162 | }
163 |
164 | // 6. Converting HTML table to EXCEL File
165 |
166 | const excel_btn = document.querySelector('#toEXCEL');
167 |
168 | const toExcel = function (table) {
169 | // Code For SIMPLE TABLE
170 | // const t_rows = table.querySelectorAll('tr');
171 | // return [...t_rows].map(row => {
172 | // const cells = row.querySelectorAll('th, td');
173 | // return [...cells].map(cell => cell.textContent.trim()).join('\t');
174 | // }).join('\n');
175 |
176 | const t_heads = table.querySelectorAll('th'),
177 | tbody_rows = table.querySelectorAll('tbody tr');
178 |
179 | const headings = [...t_heads].map(head => {
180 | let actual_head = head.textContent.trim().split(' ');
181 | return actual_head.splice(0, actual_head.length - 1).join(' ').toLowerCase();
182 | }).join('\t') + '\t' + 'image name';
183 |
184 | const table_data = [...tbody_rows].map(row => {
185 | const cells = row.querySelectorAll('td'),
186 | img = decodeURIComponent(row.querySelector('img').src),
187 | data_without_img = [...cells].map(cell => cell.textContent.trim()).join('\t');
188 |
189 | return data_without_img + '\t' + img;
190 | }).join('\n');
191 |
192 | return headings + '\n' + table_data;
193 | }
194 |
195 | excel_btn.onclick = () => {
196 | const excel = toExcel(customers_table);
197 | downloadFile(excel, 'excel');
198 | }
199 |
200 | const downloadFile = function (data, fileType, fileName = '') {
201 | const a = document.createElement('a');
202 | a.download = fileName;
203 | const mime_types = {
204 | 'json': 'application/json',
205 | 'csv': 'text/csv',
206 | 'excel': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
207 | }
208 | a.href = `
209 | data:${mime_types[fileType]};charset=utf-8,${encodeURIComponent(data)}
210 | `;
211 | document.body.appendChild(a);
212 | a.click();
213 | a.remove();
214 | }
215 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /*
2 | Responsive HTML Table With Pure CSS - Web Design/UI Design
3 |
4 | Code written by:
5 | 👨🏻⚕️ Coding Design (Jeet Saru)
6 |
7 | > You can do whatever you want with the code. However if you love my content, you can **SUBSCRIBED** my YouTube Channel.
8 |
9 | 🌎link: www.youtube.com/codingdesign
10 | */
11 |
12 | * {
13 | margin: 0;
14 | padding: 0;
15 |
16 | box-sizing: border-box;
17 | font-family: sans-serif;
18 | }
19 | @media print {
20 | .table, .table__body {
21 | overflow: visible;
22 | height: auto !important;
23 | width: auto !important;
24 | }
25 | }
26 |
27 | /*@page {
28 | size: landscape;
29 | margin: 0;
30 | }*/
31 |
32 | body {
33 | min-height: 100vh;
34 | background: url(images/html_table.jpg) center / cover;
35 | display: flex;
36 | justify-content: center;
37 | align-items: center;
38 | }
39 |
40 | main.table {
41 | width: 82vw;
42 | height: 90vh;
43 | background-color: #fff5;
44 |
45 | backdrop-filter: blur(7px);
46 | box-shadow: 0 .4rem .8rem #0005;
47 | border-radius: .8rem;
48 |
49 | overflow: hidden;
50 | }
51 |
52 | .table__header {
53 | width: 100%;
54 | height: 10%;
55 | background-color: #fff4;
56 | padding: .8rem 1rem;
57 |
58 | display: flex;
59 | justify-content: space-between;
60 | align-items: center;
61 | }
62 |
63 | .table__header .input-group {
64 | width: 35%;
65 | height: 100%;
66 | background-color: #fff5;
67 | padding: 0 .8rem;
68 | border-radius: 2rem;
69 |
70 | display: flex;
71 | justify-content: center;
72 | align-items: center;
73 |
74 | transition: .2s;
75 | }
76 |
77 | .table__header .input-group:hover {
78 | width: 45%;
79 | background-color: #fff8;
80 | box-shadow: 0 .1rem .4rem #0002;
81 | }
82 |
83 | .table__header .input-group img {
84 | width: 1.2rem;
85 | height: 1.2rem;
86 | }
87 |
88 | .table__header .input-group input {
89 | width: 100%;
90 | padding: 0 .5rem 0 .3rem;
91 | background-color: transparent;
92 | border: none;
93 | outline: none;
94 | }
95 |
96 | .table__body {
97 | width: 95%;
98 | max-height: calc(89% - 1.6rem);
99 | background-color: #fffb;
100 |
101 | margin: .8rem auto;
102 | border-radius: .6rem;
103 |
104 | overflow: auto;
105 | overflow: overlay;
106 | }
107 |
108 |
109 | .table__body::-webkit-scrollbar{
110 | width: 0.5rem;
111 | height: 0.5rem;
112 | }
113 |
114 | .table__body::-webkit-scrollbar-thumb{
115 | border-radius: .5rem;
116 | background-color: #0004;
117 | visibility: hidden;
118 | }
119 |
120 | .table__body:hover::-webkit-scrollbar-thumb{
121 | visibility: visible;
122 | }
123 |
124 |
125 | table {
126 | width: 100%;
127 | }
128 |
129 | td img {
130 | width: 36px;
131 | height: 36px;
132 | margin-right: .5rem;
133 | border-radius: 50%;
134 |
135 | vertical-align: middle;
136 | }
137 |
138 | table, th, td {
139 | border-collapse: collapse;
140 | padding: 1rem;
141 | text-align: left;
142 | }
143 |
144 | thead th {
145 | position: sticky;
146 | top: 0;
147 | left: 0;
148 | background-color: #d5d1defe;
149 | cursor: pointer;
150 | text-transform: capitalize;
151 | }
152 |
153 | tbody tr:nth-child(even) {
154 | background-color: #0000000b;
155 | }
156 |
157 | tbody tr {
158 | --delay: .1s;
159 | transition: .5s ease-in-out var(--delay), background-color 0s;
160 | }
161 |
162 | tbody tr.hide {
163 | opacity: 0;
164 | transform: translateX(100%);
165 | }
166 |
167 | tbody tr:hover {
168 | background-color: #fff6 !important;
169 | }
170 |
171 | tbody tr td,
172 | tbody tr td p,
173 | tbody tr td img {
174 | transition: .2s ease-in-out;
175 | }
176 |
177 | tbody tr.hide td,
178 | tbody tr.hide td p {
179 | padding: 0;
180 | font: 0 / 0 sans-serif;
181 | transition: .2s ease-in-out .5s;
182 | }
183 |
184 | tbody tr.hide td img {
185 | width: 0;
186 | height: 0;
187 | transition: .2s ease-in-out .5s;
188 | }
189 |
190 | .status {
191 | padding: .4rem 0;
192 | border-radius: 2rem;
193 | text-align: center;
194 | }
195 |
196 | .status.delivered {
197 | background-color: #86e49d;
198 | color: #006b21;
199 | }
200 |
201 | .status.cancelled {
202 | background-color: #d893a3;
203 | color: #b30021;
204 | }
205 |
206 | .status.pending {
207 | background-color: #ebc474;
208 | }
209 |
210 | .status.shipped {
211 | background-color: #6fcaea;
212 | }
213 |
214 |
215 | @media (max-width: 1000px) {
216 | td:not(:first-of-type) {
217 | min-width: 12.1rem;
218 | }
219 | }
220 |
221 | thead th span.icon-arrow {
222 | display: inline-block;
223 | width: 1.3rem;
224 | height: 1.3rem;
225 | border-radius: 50%;
226 | border: 1.4px solid transparent;
227 |
228 | text-align: center;
229 | font-size: 1rem;
230 |
231 | margin-left: .5rem;
232 | transition: .2s ease-in-out;
233 | }
234 |
235 | thead th:hover span.icon-arrow{
236 | border: 1.4px solid #6c00bd;
237 | }
238 |
239 | thead th:hover {
240 | color: #6c00bd;
241 | }
242 |
243 | thead th.active span.icon-arrow{
244 | background-color: #6c00bd;
245 | color: #fff;
246 | }
247 |
248 | thead th.asc span.icon-arrow{
249 | transform: rotate(180deg);
250 | }
251 |
252 | thead th.active,tbody td.active {
253 | color: #6c00bd;
254 | }
255 |
256 | .export__file {
257 | position: relative;
258 | }
259 |
260 | .export__file .export__file-btn {
261 | display: inline-block;
262 | width: 2rem;
263 | height: 2rem;
264 | background: #fff6 url(images/export.png) center / 80% no-repeat;
265 | border-radius: 50%;
266 | transition: .2s ease-in-out;
267 | }
268 |
269 | .export__file .export__file-btn:hover {
270 | background-color: #fff;
271 | transform: scale(1.15);
272 | cursor: pointer;
273 | }
274 |
275 | .export__file input {
276 | display: none;
277 | }
278 |
279 | .export__file .export__file-options {
280 | position: absolute;
281 | right: 0;
282 |
283 | width: 12rem;
284 | border-radius: .5rem;
285 | overflow: hidden;
286 | text-align: center;
287 |
288 | opacity: 0;
289 | transform: scale(.8);
290 | transform-origin: top right;
291 |
292 | box-shadow: 0 .2rem .5rem #0004;
293 |
294 | transition: .2s;
295 | }
296 |
297 | .export__file input:checked + .export__file-options {
298 | opacity: 1;
299 | transform: scale(1);
300 | z-index: 100;
301 | }
302 |
303 | .export__file .export__file-options label{
304 | display: block;
305 | width: 100%;
306 | padding: .6rem 0;
307 | background-color: #f2f2f2;
308 |
309 | display: flex;
310 | justify-content: space-around;
311 | align-items: center;
312 |
313 | transition: .2s ease-in-out;
314 | }
315 |
316 | .export__file .export__file-options label:first-of-type{
317 | padding: 1rem 0;
318 | background-color: #86e49d !important;
319 | }
320 |
321 | .export__file .export__file-options label:hover{
322 | transform: scale(1.05);
323 | background-color: #fff;
324 | cursor: pointer;
325 | }
326 |
327 | .export__file .export__file-options img{
328 | width: 2rem;
329 | height: auto;
330 | }
331 |
--------------------------------------------------------------------------------
29 |