Skip to content

Commit 97d9f56

Browse files
SebKaySebKay
committed
Style tables
1 parent caef599 commit 97d9f56

File tree

4 files changed

+63
-30
lines changed

4 files changed

+63
-30
lines changed

‎resources/css/app.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
@import "./utilities.css";
1212
@import "./forms.css";
1313
@import "./buttons.css";
14+
@import "./tables.css";
1415
@import "./content.css";
1516

1617
@layer base {

‎resources/css/content.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,6 @@
4848
}
4949
}
5050

51-
.table-wrap {
52-
@apply p-8 rounded-lg bg-white;
53-
}
54-
5551
table {
5652
@apply table;
5753
}

‎resources/css/tables.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@utility table {
2+
@apply w-full text-left;
3+
4+
th,
5+
td {
6+
@apply border-b;
7+
}
8+
9+
th:first-child,
10+
td:first-child {
11+
@apply pl-0;
12+
}
13+
14+
th:last-child,
15+
td:last-child {
16+
@apply pr-0;
17+
}
18+
19+
th {
20+
@apply p-3 font-bold border-b-2 border-brand-950;
21+
}
22+
23+
td {
24+
@apply p-3 border-brand-950/15;
25+
}
26+
}
27+
28+
@utility table-wrap {
29+
@apply w-full overflow-auto;
30+
31+
table {
32+
@apply min-w-[500px];
33+
}
34+
}

‎resources/js/Pages/Elements.vue

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -147,32 +147,34 @@
147147
voluptates architecto laboriosam ipsum voluptatem ducimus.
148148
</p>
149149
</blockquote>
150-
<table>
151-
<thead>
152-
<tr>
153-
<th>Table Heading 1</th>
154-
<th>Table Heading 2</th>
155-
<th>Table Heading 3</th>
156-
</tr>
157-
</thead>
158-
<tbody>
159-
<tr>
160-
<td>Table Data 1</td>
161-
<td>Table Data 2</td>
162-
<td>Table Data 3</td>
163-
</tr>
164-
<tr>
165-
<td>Table Data 1</td>
166-
<td>Table Data 2</td>
167-
<td>Table Data 3</td>
168-
</tr>
169-
<tr>
170-
<td>Table Data 1</td>
171-
<td>Table Data 2</td>
172-
<td>Table Data 3</td>
173-
</tr>
174-
</tbody>
175-
</table>
150+
<div class="table-wrap">
151+
<table>
152+
<thead>
153+
<tr>
154+
<th>Table Heading 1</th>
155+
<th>Table Heading 2</th>
156+
<th>Table Heading 3</th>
157+
</tr>
158+
</thead>
159+
<tbody>
160+
<tr>
161+
<td>Table Data 1</td>
162+
<td>Table Data 2</td>
163+
<td>Table Data 3</td>
164+
</tr>
165+
<tr>
166+
<td>Table Data 1</td>
167+
<td>Table Data 2</td>
168+
<td>Table Data 3</td>
169+
</tr>
170+
<tr>
171+
<td>Table Data 1</td>
172+
<td>Table Data 2</td>
173+
<td>Table Data 3</td>
174+
</tr>
175+
</tbody>
176+
</table>
177+
</div>
176178
</div>
177179
</div>
178180
</div>

0 commit comments

Comments
 (0)