teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

CSSソースコードの追加

2018/11/26 08:11

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -11,6 +11,232 @@
11
11
  ![以下画像番号順](9afe2b13253d1b8ce2c205b780a57d1d.jpeg)
12
12
  です。
13
13
 
14
+ 恐らくこのcssを変更すればOKだと思うのですが
15
+ どこをどう変更して良いか分からない状態です。
16
+ ```
17
+ /*
18
+ * This combined file was created by the DataTables downloader builder:
19
+ * https://datatables.net/download
20
+ *
21
+ * To rebuild or modify this file with the latest versions of the included
22
+ * software please visit:
23
+ * https://datatables.net/download/#bs4/dt-1.10.18
24
+ *
25
+ * Included libraries:
26
+ * DataTables 1.10.18
27
+ */
28
+
29
+ table.dataTable {
30
+ clear: both;
31
+ margin-top: 6px !important;
32
+ margin-bottom: 6px !important;
33
+ max-width: none !important;
34
+ border-collapse: separate !important;
35
+ border-spacing: 0;
36
+ }
37
+ table.dataTable td,
38
+ table.dataTable th {
39
+ -webkit-box-sizing: content-box;
40
+ box-sizing: content-box;
41
+ }
42
+ table.dataTable td.dataTables_empty,
43
+ table.dataTable th.dataTables_empty {
44
+ text-align: center;
45
+ }
46
+ table.dataTable.nowrap th,
47
+ table.dataTable.nowrap td {
48
+ white-space: nowrap;
49
+ }
50
+
51
+ div.dataTables_wrapper div.dataTables_length label {
52
+ font-weight: normal;
53
+ text-align: left;
54
+ white-space: nowrap;
55
+ }
56
+ div.dataTables_wrapper div.dataTables_length select {
57
+ width: auto;
58
+ display: inline-block;
59
+ }
60
+ div.dataTables_wrapper div.dataTables_filter {
61
+ text-align: left;
62
+ }
63
+ div.dataTables_wrapper div.dataTables_filter label {
64
+ font-weight: normal;
65
+ white-space: nowrap;
66
+ text-align: left;
67
+ }
68
+ div.dataTables_wrapper div.dataTables_filter input {
69
+ margin-left: 0.5em;
70
+ display: inline-block;
71
+ width: auto;
72
+ }
73
+ div.dataTables_wrapper div.dataTables_info {
74
+ padding-top: 0.85em;
75
+ white-space: nowrap;
76
+ }
77
+ div.dataTables_wrapper div.dataTables_paginate {
78
+ margin: 0;
79
+ white-space: nowrap;
80
+ text-align: right;
81
+ }
82
+ div.dataTables_wrapper div.dataTables_paginate ul.pagination {
83
+ margin: 2px 0;
84
+ white-space: nowrap;
85
+ justify-content: flex-end;
86
+ }
87
+ div.dataTables_wrapper div.dataTables_processing {
88
+ position: absolute;
89
+ top: 50%;
90
+ left: 50%;
91
+ width: 200px;
92
+ margin-left: -100px;
93
+ margin-top: -26px;
94
+ text-align: center;
95
+ padding: 1em 0;
96
+ }
97
+
98
+ table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting,
99
+ table.dataTable thead > tr > td.sorting_asc,
100
+ table.dataTable thead > tr > td.sorting_desc,
101
+ table.dataTable thead > tr > td.sorting {
102
+ padding-right: 30px;
103
+ }
104
+ table.dataTable thead > tr > th:active,
105
+ table.dataTable thead > tr > td:active {
106
+ outline: none;
107
+ }
108
+ table.dataTable thead .sorting,
109
+ table.dataTable thead .sorting_asc,
110
+ table.dataTable thead .sorting_desc,
111
+ table.dataTable thead .sorting_asc_disabled,
112
+ table.dataTable thead .sorting_desc_disabled {
113
+ cursor: pointer;
114
+ position: relative;
115
+ }
116
+ table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
117
+ table.dataTable thead .sorting_asc:before,
118
+ table.dataTable thead .sorting_asc:after,
119
+ table.dataTable thead .sorting_desc:before,
120
+ table.dataTable thead .sorting_desc:after,
121
+ table.dataTable thead .sorting_asc_disabled:before,
122
+ table.dataTable thead .sorting_asc_disabled:after,
123
+ table.dataTable thead .sorting_desc_disabled:before,
124
+ table.dataTable thead .sorting_desc_disabled:after {
125
+ position: absolute;
126
+ bottom: 0.9em;
127
+ display: block;
128
+ opacity: 0.3;
129
+ }
130
+ table.dataTable thead .sorting:before,
131
+ table.dataTable thead .sorting_asc:before,
132
+ table.dataTable thead .sorting_desc:before,
133
+ table.dataTable thead .sorting_asc_disabled:before,
134
+ table.dataTable thead .sorting_desc_disabled:before {
135
+ right: 1em;
136
+ content: "\25B2";
137
+ }
138
+ table.dataTable thead .sorting:after,
139
+ table.dataTable thead .sorting_asc:after,
140
+ table.dataTable thead .sorting_desc:after,
141
+ table.dataTable thead .sorting_asc_disabled:after,
142
+ table.dataTable thead .sorting_desc_disabled:after {
143
+ right: 0.1em;
144
+ content: "\25BC";
145
+ }
146
+ table.dataTable thead .sorting_asc:before,
147
+ table.dataTable thead .sorting_desc:after {
148
+ opacity: 1;
149
+ }
150
+ table.dataTable thead .sorting_asc_disabled:before,
151
+ table.dataTable thead .sorting_desc_disabled:after {
152
+ opacity: 0;
153
+ }
154
+
155
+ div.dataTables_scrollHead table.dataTable {
156
+ margin-bottom: 0 !important;
157
+ }
158
+
159
+ div.dataTables_scrollBody table {
160
+ border-top: none;
161
+ margin-top: 0 !important;
162
+ margin-bottom: 0 !important;
163
+ }
164
+ div.dataTables_scrollBody table thead .sorting:before,
165
+ div.dataTables_scrollBody table thead .sorting_asc:before,
166
+ div.dataTables_scrollBody table thead .sorting_desc:before,
167
+ div.dataTables_scrollBody table thead .sorting:after,
168
+ div.dataTables_scrollBody table thead .sorting_asc:after,
169
+ div.dataTables_scrollBody table thead .sorting_desc:after {
170
+ display: none;
171
+ }
172
+ div.dataTables_scrollBody table tbody tr:first-child th,
173
+ div.dataTables_scrollBody table tbody tr:first-child td {
174
+ border-top: none;
175
+ }
176
+
177
+ div.dataTables_scrollFoot > .dataTables_scrollFootInner {
178
+ box-sizing: content-box;
179
+ }
180
+ div.dataTables_scrollFoot > .dataTables_scrollFootInner > table {
181
+ margin-top: 0 !important;
182
+ border-top: none;
183
+ }
184
+
185
+ @media screen and (max-width: 767px) {
186
+ div.dataTables_wrapper div.dataTables_length,
187
+ div.dataTables_wrapper div.dataTables_filter,
188
+ div.dataTables_wrapper div.dataTables_info,
189
+ div.dataTables_wrapper div.dataTables_paginate {
190
+ text-align: center;
191
+ }
192
+ }
193
+ table.dataTable.table-sm > thead > tr > th {
194
+ padding-right: 20px;
195
+ }
196
+ table.dataTable.table-sm .sorting:before,
197
+ table.dataTable.table-sm .sorting_asc:before,
198
+ table.dataTable.table-sm .sorting_desc:before {
199
+ top: 5px;
200
+ right: 0.85em;
201
+ }
202
+ table.dataTable.table-sm .sorting:after,
203
+ table.dataTable.table-sm .sorting_asc:after,
204
+ table.dataTable.table-sm .sorting_desc:after {
205
+ top: 5px;
206
+ }
207
+
208
+ table.table-bordered.dataTable th,
209
+ table.table-bordered.dataTable td {
210
+ border-left-width: 0;
211
+ }
212
+ table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child,
213
+ table.table-bordered.dataTable td:last-child,
214
+ table.table-bordered.dataTable td:last-child {
215
+ border-right-width: 0;
216
+ }
217
+ table.table-bordered.dataTable tbody th,
218
+ table.table-bordered.dataTable tbody td {
219
+ border-bottom-width: 0;
220
+ }
221
+
222
+ div.dataTables_scrollHead table.table-bordered {
223
+ border-bottom-width: 0;
224
+ }
225
+
226
+ div.table-responsive > div.dataTables_wrapper > div.row {
227
+ margin: 0;
228
+ }
229
+ div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child {
230
+ padding-left: 0;
231
+ }
232
+ div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child {
233
+ padding-right: 0;
234
+ }
235
+
236
+
237
+
238
+ ```
239
+
14
240
  以上ですが
15
241
  宜しくお願い致します。
16
242
  ※バージョンはdatatables-1.10.18です。

3

ソースコードを外した

2018/11/26 08:11

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -2,240 +2,15 @@
2
2
  ヘッダー、フッターにある改ページ機能、検索機能、昇順降順アイコンの変更が
3
3
  出来ずに困っています。
4
4
 
5
- datatables.cssを変更すればよい事は解ったのですが
6
- どう変更したらよいのか分かりません
7
5
  やりたい事としては
8
6
  ①ヘッダー部の〇〇件表示の位置の変更
9
7
  ②ヘッダー部の検索ボックスの位置の変更
10
8
  ③ヘッダー部の昇順、降順アイコンの変更
11
9
  ④フッター部の「8 件中 1 から 5 まで表示」の箇所の位置の変更
12
10
  ⑤フッター部の「前12次」の箇所の位置の変更
13
- ![イメージ説明](9afe2b13253d1b8ce2c205b780a57d1d.jpeg)
11
+ ![以下画像番号順](9afe2b13253d1b8ce2c205b780a57d1d.jpeg)
14
12
  です。
15
13
 
16
- datatables.cssのコードは以下の通りです。
17
- ```/*
18
- * This combined file was created by the DataTables downloader builder:
19
- * https://datatables.net/download
20
- *
21
- * To rebuild or modify this file with the latest versions of the included
22
- * software please visit:
23
- * https://datatables.net/download/#bs4/dt-1.10.18
24
- *
25
- * Included libraries:
26
- * DataTables 1.10.18
27
- */
28
-
29
- table.dataTable {
30
- clear: both;
31
- margin-top: 6px !important;
32
- margin-bottom: 6px !important;
33
- max-width: none !important;
34
- border-collapse: separate !important;
35
- border-spacing: 0;
36
- }
37
- table.dataTable td,
38
- table.dataTable th {
39
- -webkit-box-sizing: content-box;
40
- box-sizing: content-box;
41
- }
42
- table.dataTable td.dataTables_empty,
43
- table.dataTable th.dataTables_empty {
44
- text-align: center;
45
- }
46
- table.dataTable.nowrap th,
47
- table.dataTable.nowrap td {
48
- white-space: nowrap;
49
- }
50
-
51
- div.dataTables_wrapper div.dataTables_length label {
52
- font-weight: normal;
53
- text-align: left;
54
- white-space: nowrap;
55
- }
56
- div.dataTables_wrapper div.dataTables_length select {
57
- width: auto;
58
- display: inline-block;
59
- }
60
- div.dataTables_wrapper div.dataTables_filter {
61
- text-align: left;
62
- }
63
- div.dataTables_wrapper div.dataTables_filter label {
64
- font-weight: normal;
65
- white-space: nowrap;
66
- text-align: left;
67
- }
68
- div.dataTables_wrapper div.dataTables_filter input {
69
- margin-left: 0.5em;
70
- display: inline-block;
71
- width: auto;
72
- }
73
- div.dataTables_wrapper div.dataTables_info {
74
- padding-top: 0.85em;
75
- white-space: nowrap;
76
- }
77
- div.dataTables_wrapper div.dataTables_paginate {
78
- margin: 0;
79
- white-space: nowrap;
80
- text-align: right;
81
- }
82
- div.dataTables_wrapper div.dataTables_paginate ul.pagination {
83
- margin: 2px 0;
84
- white-space: nowrap;
85
- justify-content: flex-end;
86
- }
87
- div.dataTables_wrapper div.dataTables_processing {
88
- position: absolute;
89
- top: 50%;
90
- left: 50%;
91
- width: 200px;
92
- margin-left: -100px;
93
- margin-top: -26px;
94
- text-align: center;
95
- padding: 1em 0;
96
- }
97
-
98
- table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting,
99
- table.dataTable thead > tr > td.sorting_asc,
100
- table.dataTable thead > tr > td.sorting_desc,
101
- table.dataTable thead > tr > td.sorting {
102
- padding-right: 30px;
103
- }
104
- table.dataTable thead > tr > th:active,
105
- table.dataTable thead > tr > td:active {
106
- outline: none;
107
- }
108
- table.dataTable thead .sorting,
109
- table.dataTable thead .sorting_asc,
110
- table.dataTable thead .sorting_desc,
111
- table.dataTable thead .sorting_asc_disabled,
112
- table.dataTable thead .sorting_desc_disabled {
113
- cursor: pointer;
114
- position: relative;
115
- }
116
- table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
117
- table.dataTable thead .sorting_asc:before,
118
- table.dataTable thead .sorting_asc:after,
119
- table.dataTable thead .sorting_desc:before,
120
- table.dataTable thead .sorting_desc:after,
121
- table.dataTable thead .sorting_asc_disabled:before,
122
- table.dataTable thead .sorting_asc_disabled:after,
123
- table.dataTable thead .sorting_desc_disabled:before,
124
- table.dataTable thead .sorting_desc_disabled:after {
125
- position: absolute;
126
- bottom: 0.9em;
127
- display: block;
128
- opacity: 0.3;
129
- }
130
- table.dataTable thead .sorting:before,
131
- table.dataTable thead .sorting_asc:before,
132
- table.dataTable thead .sorting_desc:before,
133
- table.dataTable thead .sorting_asc_disabled:before,
134
- table.dataTable thead .sorting_desc_disabled:before {
135
- right: 1em;
136
- content: "\2191";
137
- }
138
- table.dataTable thead .sorting:after,
139
- table.dataTable thead .sorting_asc:after,
140
- table.dataTable thead .sorting_desc:after,
141
- table.dataTable thead .sorting_asc_disabled:after,
142
- table.dataTable thead .sorting_desc_disabled:after {
143
- right: 0.5em;
144
- content: "\2193";
145
- }
146
- table.dataTable thead .sorting_asc:before,
147
- table.dataTable thead .sorting_desc:after {
148
- opacity: 1;
149
- }
150
- table.dataTable thead .sorting_asc_disabled:before,
151
- table.dataTable thead .sorting_desc_disabled:after {
152
- opacity: 0;
153
- }
154
-
155
- div.dataTables_scrollHead table.dataTable {
156
- margin-bottom: 0 !important;
157
- }
158
-
159
- div.dataTables_scrollBody table {
160
- border-top: none;
161
- margin-top: 0 !important;
162
- margin-bottom: 0 !important;
163
- }
164
- div.dataTables_scrollBody table thead .sorting:before,
165
- div.dataTables_scrollBody table thead .sorting_asc:before,
166
- div.dataTables_scrollBody table thead .sorting_desc:before,
167
- div.dataTables_scrollBody table thead .sorting:after,
168
- div.dataTables_scrollBody table thead .sorting_asc:after,
169
- div.dataTables_scrollBody table thead .sorting_desc:after {
170
- display: none;
171
- }
172
- div.dataTables_scrollBody table tbody tr:first-child th,
173
- div.dataTables_scrollBody table tbody tr:first-child td {
174
- border-top: none;
175
- }
176
-
177
- div.dataTables_scrollFoot > .dataTables_scrollFootInner {
178
- box-sizing: content-box;
179
- }
180
- div.dataTables_scrollFoot > .dataTables_scrollFootInner > table {
181
- margin-top: 0 !important;
182
- border-top: none;
183
- }
184
-
185
- @media screen and (max-width: 767px) {
186
- div.dataTables_wrapper div.dataTables_length,
187
- div.dataTables_wrapper div.dataTables_filter,
188
- div.dataTables_wrapper div.dataTables_info,
189
- div.dataTables_wrapper div.dataTables_paginate {
190
- text-align: center;
191
- }
192
- }
193
- table.dataTable.table-sm > thead > tr > th {
194
- padding-right: 20px;
195
- }
196
- table.dataTable.table-sm .sorting:before,
197
- table.dataTable.table-sm .sorting_asc:before,
198
- table.dataTable.table-sm .sorting_desc:before {
199
- top: 5px;
200
- right: 0.85em;
201
- }
202
- table.dataTable.table-sm .sorting:after,
203
- table.dataTable.table-sm .sorting_asc:after,
204
- table.dataTable.table-sm .sorting_desc:after {
205
- top: 5px;
206
- }
207
-
208
- table.table-bordered.dataTable th,
209
- table.table-bordered.dataTable td {
210
- border-left-width: 0;
211
- }
212
- table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child,
213
- table.table-bordered.dataTable td:last-child,
214
- table.table-bordered.dataTable td:last-child {
215
- border-right-width: 0;
216
- }
217
- table.table-bordered.dataTable tbody th,
218
- table.table-bordered.dataTable tbody td {
219
- border-bottom-width: 0;
220
- }
221
-
222
- div.dataTables_scrollHead table.table-bordered {
223
- border-bottom-width: 0;
224
- }
225
-
226
- div.table-responsive > div.dataTables_wrapper > div.row {
227
- margin: 0;
228
- }
229
- div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child {
230
- padding-left: 0;
231
- }
232
- div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child {
233
- padding-right: 0;
234
- }
235
-
236
-
237
-
238
- ```
239
14
  以上ですが
240
15
  宜しくお願い致します。
241
16
  ※バージョンはdatatables-1.10.18です。

2

タグの付け加え

2018/11/26 05:34

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
File without changes

1

tagの付け加え

2018/11/26 04:20

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
File without changes