mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 01:26:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #98 from picocss/fix/table

Browse source 
Tables: Remove explicit background-color and add tfoot support
This commit is contained in:
Lucas Larroche 2021-12-31 17:03:33 +07:00 • committed by GitHub
commit ab75fca7d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 97 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

14
css/pico.classless.css
View file

@ -168,11 +168,13 @@ h5 {
} }
thead th, thead th,
thead td { thead td,
tfoot th,
tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead) > * > td { :not(thead):not(tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -1663,12 +1665,14 @@ td {
text-align: start; text-align: start;
} }
tr { tfoot th,
background-color: var(--background-color); tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
} }
table[role=grid] tbody tr:nth-child(odd) { table[role=grid] tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color); background-color: var(--table-row-stripped-background-color);
} }
/** /**

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

14
css/pico.css
View file

@ -173,11 +173,13 @@ h5 {
} }
thead th, thead th,
thead td { thead td,
tfoot th,
tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead) > * > td { :not(thead):not(tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -1850,12 +1852,14 @@ td {
text-align: start; text-align: start;
} }
tr { tfoot th,
background-color: var(--background-color); tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
} }
table[role=grid] tbody tr:nth-child(odd) { table[role=grid] tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color); background-color: var(--table-row-stripped-background-color);
} }
/** /**

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

14
css/pico.fluid.classless.css
View file

@ -168,11 +168,13 @@ h5 {
} }
thead th, thead th,
thead td { thead td,
tfoot th,
tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead) > * > td { :not(thead):not(tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -1633,12 +1635,14 @@ td {
text-align: start; text-align: start;
} }
tr { tfoot th,
background-color: var(--background-color); tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
} }
table[role=grid] tbody tr:nth-child(odd) { table[role=grid] tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color); background-color: var(--table-row-stripped-background-color);
} }
/** /**

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

14
css/pico.slim.css
View file

@ -105,11 +105,13 @@ h5 {
} }
thead th, thead th,
thead td { thead td,
tfoot th,
tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead) > * > td { :not(thead):not(tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -1393,12 +1395,14 @@ td {
text-align: start; text-align: start;
} }
tr { tfoot th,
background-color: var(--background-color); tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
} }
table[role=grid] tbody tr:nth-child(odd) { table[role=grid] tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color); background-color: var(--table-row-stripped-background-color);
} }
/** /**

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

6
css/themes/default.css
View file

@ -169,11 +169,13 @@ h5 {
} }
thead th, thead th,
thead td { thead td,
tfoot th,
tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead) > * > td { :not(thead):not(tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }

2
css/themes/default.css.map
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css.map
View file

File diff suppressed because one or more lines are too long

20
docs/src/tables.html
View file

@ -58,6 +58,16 @@
<td>Cell</td> <td>Cell</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th scope="row">#</th>
<td>Total</td>
<td>Total</td>
<td>Total</td>
<td>Total</td>
<td>Total</td>
</tr>
</tfoot>
</table> </table>
</figure> </figure>
@ -98,6 +108,16 @@
&lt;<b>td</b>>Cell&lt;/<b>td</b>&gt; &lt;<b>td</b>>Cell&lt;/<b>td</b>&gt;
&lt;/<b>tr</b>&gt; &lt;/<b>tr</b>&gt;
&lt;/<b>tbody</b>&gt; &lt;/<b>tbody</b>&gt;
&lt;<b>tfoot</b>&gt;
&lt;<b>tr</b>&gt;
&lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;#&lt;/<b>th</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;/<b>tr</b>&gt;
&lt;/<b>tfoot</b>&gt;
&lt;/<b>table</b>&gt;</code></pre> &lt;/<b>table</b>&gt;</code></pre>
<p><code><i>role</i>=<u>"grid"</u></code> enable striped rows.</p> <p><code><i>role</i>=<u>"grid"</u></code> enable striped rows.</p>

12
docs/tables.html
View file

File diff suppressed because one or more lines are too long

12
scss/content/_table.scss
View file

@ -33,16 +33,20 @@ td {
text-align: start; text-align: start;
} }
// Rows // Footer
tr { tfoot {
background-color: var(--background-color); th,
td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
} }
// Striped // Striped
table { table {
&[role="grid"] { &[role="grid"] {
tbody tr:nth-child(odd) { tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color); background-color: var(--table-row-stripped-background-color);
} }
} }
} }

5
scss/themes/default/_styles.scss
View file

@ -211,14 +211,15 @@ h5 {
} }
// Table // Table
thead { thead,
tfoot {
th, th,
td { td {
--border-width: 3px; --border-width: 3px;
} }
} }
:not(thead) > * > td { :not(thead):not(tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }