You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@spark.apache.org by ya...@apache.org on 2024/01/26 03:14:25 UTC
(spark) branch master updated: [SPARK-46863][DOCS] Cleanup custom CSS
This is an automated email from the ASF dual-hosted git repository.
yao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/spark.git
The following commit(s) were added to refs/heads/master by this push:
new 545489a60048 [SPARK-46863][DOCS] Cleanup custom CSS
545489a60048 is described below
commit 545489a60048e760c01dffea0c11c0c461030ac3
Author: Nicholas Chammas <ni...@gmail.com>
AuthorDate: Fri Jan 26 11:14:09 2024 +0800
[SPARK-46863][DOCS] Cleanup custom CSS
### What changes were proposed in this pull request?
- Remove rules for the following classes that we do not use:
- `.code` (We use `code` _elements_, but not a `code` _class_.)
- `.code-tab` (We _do_ have a `codetabs` class, however.)
- `.jumbotron` (No idea where this came from, but we don't use it.)
- Remove some superfluous comments.
- Using [css-purge][1], merge rules for the same selectors that were previously scattered across several blocks, and remove overridden rules.
- Format the whole file with VS Code. This makes the spacing consistent, and puts each selector on its own line.
[1]: http://rbtech.github.io/css-purge/
### Why are the changes needed?
It's very difficult to make improvements to the presentation of the documentation due to the noise in this CSS file. This change will facilitate future improvements to the documentation.
### Does this PR introduce _any_ user-facing change?
No, it shouldn't. This change should be functionally neutral.
### How was this patch tested?
I built the docs and manually reviewed them. Code blocks and tables look the same to me.
### Was this patch authored or co-authored using generative AI tooling?
No.
Closes #44885 from nchammas/css-cleanup.
Authored-by: Nicholas Chammas <ni...@gmail.com>
Signed-off-by: Kent Yao <ya...@apache.org>
---
docs/css/custom.css | 561 +++++++++++++++++++---------------------------------
1 file changed, 199 insertions(+), 362 deletions(-)
diff --git a/docs/css/custom.css b/docs/css/custom.css
index 51e89066e4d5..1fabf7be3ac8 100644
--- a/docs/css/custom.css
+++ b/docs/css/custom.css
@@ -1,9 +1,6 @@
-
-
-
body {
color: #666666;
- font-family: 'DM Sans', sans-serif;
+ font-family: "DM Sans", sans-serif;
font-style: normal;
font-weight: 400;
overflow-wrap: anywhere;
@@ -13,11 +10,13 @@ body {
}
a {
+ background: transparent;
color: #2fa4e7;
text-decoration: none;
}
-a:hover, a:focus {
+a:hover,
+a:focus {
color: #157ab5;
text-decoration: underline;
}
@@ -25,41 +24,43 @@ a:hover, a:focus {
.navbar {
border-radius: 0;
z-index: 9999;
-}
-
-.navbar {
transition: none !important;
}
-.navbar .nav-item:hover .dropdown-menu, .navbar .nav-item .dropdown-menu, .navbar .dropdown-menu.fade-down, .navbar-toggler, .collapse, .collapsing {
+.navbar .nav-item:hover .dropdown-menu,
+.navbar .nav-item .dropdown-menu,
+.navbar .dropdown-menu.fade-down,
+.navbar-toggler,
+.collapse,
+.collapsing {
transition: none !important;
transform: none !important;
}
@media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu {
- display: block;
- opacity: 0;
- visibility: hidden;
- transition: none !important;
- margin-top: 0;
+ display: block;
+ opacity: 0;
+ visibility: hidden;
+ transition: none !important;
+ margin-top: 0;
}
.navbar .dropdown-menu.fade-down {
- top: 80%;
- transform: none !important;
- transform-origin: 0% 0%;
+ top: 80%;
+ transform: none !important;
+ transform-origin: 0% 0%;
}
.navbar .dropdown-menu.fade-up {
- top: 180%;
+ top: 180%;
}
.navbar .nav-item:hover .dropdown-menu {
- opacity: 1;
- visibility: visible;
- top: 100%;
- font-size: calc(0.51rem + 0.55vw);
+ opacity: 1;
+ visibility: visible;
+ top: 100%;
+ font-size: calc(0.51rem + 0.55vw);
}
}
@@ -74,12 +75,17 @@ a:hover, a:focus {
text-decoration: none !important;
}
-.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .nav-link {
+.navbar-dark .navbar-nav .nav-link.active,
+.navbar-dark .navbar-nav .show>.nav-link,
+.navbar-dark .navbar-nav .nav-link {
color: #ffffff;
border: 1px solid transparent;
}
-.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:active, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
+.navbar-dark .navbar-nav .nav-link:focus,
+.navbar-dark .navbar-nav .nav-link:active,
+.navbar-dark .navbar-nav .nav-link:focus,
+.navbar-dark .navbar-nav .nav-link:hover {
color: #ffffff;
background-color: #1b618e;
border: 1px solid transparent;
@@ -151,9 +157,9 @@ section {
}
@media screen and (min-width: 1900px) {
-.apache-spark-motto {
- font-size: 7.3rem;
-}
+ .apache-spark-motto {
+ font-size: 7.3rem;
+ }
}
.features .title {
@@ -184,18 +190,21 @@ section {
color: #ffffff;
}
-.spark-run-now .nav-link:focus, .nav-link:hover {
+.spark-run-now .nav-link:focus,
+.nav-link:hover {
color: #ffffff;
border: 1px solid transparent;
}
-.spark-run-now .nav-tabs .nav-item.show .nav-link, .spark-run-now .nav-tabs .nav-link.active {
+.spark-run-now .nav-tabs .nav-item.show .nav-link,
+.spark-run-now .nav-tabs .nav-link.active {
color: #ffffff;
background-color: #1d6890;
border: none;
}
-.spark-run-now .nav-tabs .nav-link:focus, .spark-run-now .nav-tabs .nav-link:hover {
+.spark-run-now .nav-tabs .nav-link:focus,
+.spark-run-now .nav-tabs .nav-link:hover {
outline: none;
background-color: #1D6890;
border: 1px solid transparent;
@@ -227,41 +236,6 @@ section {
border-top: 2px solid #000000;
}
-.spark-install .code {
- color: #000000;
- background-color: #ffffff;
- padding: 15px;
- font-family: "Menlo", "Lucida Console", Consolas, monospace;
- font-style: normal;
- font-weight: normal;
- font-size: 14px;
- line-height: 1.428571429;
-}
-
-.spark-install .code p {
- margin: 0;
-}
-
-.spark-install .code .orange {
- color: #df584e;
-}
-
-.spark-install .code .green {
- color: #579f52;
-}
-
-.spark-install .code .blue {
- color: #2088bb;
-}
-
-.spark-install .code .purple {
- color: #a73ea7;
-}
-
-.spark-install .code .brown {
- color: #976716;
-}
-
.examples {
color: #666666;
padding: 12px 0 0 0;
@@ -288,9 +262,6 @@ section {
font-weight: normal;
font-size: 15px;
line-height: 19px;
-}
-
-.spark-run-now .examples .nav-link {
color: #666666;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
@@ -328,12 +299,15 @@ section {
margin-bottom: 0;
}
-.spark-run-now .examples .nav-tabs .nav-link:focus, .spark-run-now .examples .nav-tabs .nav-link:hover, .spark-run-now .examples .nav-tabs .nav-link:active {
+.spark-run-now .examples .nav-tabs .nav-link:focus,
+.spark-run-now .examples .nav-tabs .nav-link:hover,
+.spark-run-now .examples .nav-tabs .nav-link:active {
border-right: 1px solid;
}
-.spark-run-now .examples .nav-tabs .nav-item.show .nav-link, .spark-run-now .examples .nav-tabs .nav-link.active {
- border-right: 1px solid #666666;
+.spark-run-now .examples .nav-tabs .nav-item.show .nav-link,
+.spark-run-now .examples .nav-tabs .nav-link.active {
+ border-right: 1px solid #666;
}
.btn {
@@ -400,133 +374,118 @@ section {
@media (max-width: 768px) {
.hero-banner {
- background-size: 390px;
- background-position: center right;
- background-position-y: 40px;
+ background-size: 390px;
+ background-position: center right;
+ background-position-y: 40px;
}
.hero-banner .bg {
- transform: translate(46%, -5%);
+ transform: translate(46%, -5%);
+ display: none;
}
.hero-banner h1 {
- margin-bottom: 30px;
+ margin-bottom: 30px;
}
.apache-spark-motto {
- font-size: 90px;
- margin: 120px 0;
+ font-size: 90px;
+ margin: 120px 0;
}
.features {
- margin-top: 53px;
+ margin-top: 53px;
}
.features:first-child {
- margin-top: 0;
+ margin-top: 0;
}
.border-end {
- border-right: 1px solid transparent !important;
- border-bottom: 1px solid #dee2e6 !important;
- }
-
- .hero-banner .bg {
- display: none;
+ border-right: 1px solid transparent;
+ border-bottom: 1px solid #dee2e6;
}
}
@media (max-width: 320px) {
.hero-banner {
- background-size: 230px;
- background-position: center right;
- background-position-y: 160px;
- background: none;
+ background-size: 230px;
+ background-position: center right;
+ background-position-y: 160px;
+ background: none;
}
- .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .nav-link {
- padding-left: 1rem;
+ .navbar-dark .navbar-nav .nav-link.active,
+ .navbar-dark .navbar-nav .show>.nav-link,
+ .navbar-dark .navbar-nav .nav-link {
+ padding-left: 1rem;
}
.hero-banner h1 {
- line-height: 65px;
+ line-height: 65px;
}
.apache-spark-motto {
- font-size: 70px;
- margin: 0 0 50px 0;
- line-height: 80px;
+ font-size: 70px;
+ margin: 0 0 50px 0;
+ line-height: 80px;
}
}
-a {
- background: transparent;
-}
-
-a:active, a:hover {
+a:active,
+a:hover {
outline: 0;
}
@media print {
* {
- color: #000 !important;
- text-shadow: none !important;
- background: transparent !important;
- box-shadow: none !important;
+ color: #000 !important;
+ text-shadow: none !important;
+ background: transparent !important;
+ box-shadow: none !important;
}
- a, a:visited {
- text-decoration: underline;
+ a,
+ a:visited {
+ text-decoration: underline;
}
a[href]:after {
- content: " (" attr(href) ")";
+ content: " (" attr(href) ")";
}
p {
- orphans: 3;
- widows: 3;
+ orphans: 3;
+ widows: 3;
}
pre {
- border: 1px solid #999;
- page-break-inside: avoid;
+ border: 1px solid #999;
+ page-break-inside: avoid;
}
.global pre {
- border: 1px solid #999;
- page-break-inside: avoid;
- }
-
- h3 {
- orphans: 3;
- widows: 3;
+ border: 1px solid #999;
+ page-break-inside: avoid;
}
h3 {
- page-break-after: avoid;
+ orphans: 3;
+ widows: 3;
+ page-break-after: avoid;
}
}
-*, *:before, *:after {
+*,
+*:before,
+*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-a {
- color: #2fa4e7;
- text-decoration: none;
-}
-
-a:hover, a:focus {
- color: #157ab5;
- text-decoration: underline;
-}
-
a:focus {
- outline: thin dotted;
- outline: 5px auto -webkit-focus-ring-color;
+ outline: 5px;
outline-offset: -2px;
}
@@ -535,17 +494,10 @@ h5 {
font-weight: 500;
line-height: 1.1;
color: #317eac;
-}
-
-h5 {
margin-top: 10px;
margin-bottom: 10px;
}
-h5 {
- font-size: 14px;
-}
-
p {
margin: 0 0 10px;
}
@@ -571,15 +523,18 @@ ul {
}
.news h5 {
- color: rgb(85, 85, 85);
+ color: #555;
+ font-size: 16px;
}
.news ul li {
margin-bottom: 6px;
}
-.news li a, .news li a:hover, .news li a:visited {
- color: rgb(85, 85, 85);
+.news li a,
+.news li a:hover,
+.news li a:visited {
+ color: #555;
}
.news li .small {
@@ -587,33 +542,8 @@ ul {
font-size: 12px;
}
-.news h5 {
- font-size: 16px;
-}
-
-code, pre {
- font-family: monospace, serif;
- font-size: 1em;
-}
-
pre {
white-space: pre-wrap;
-}
-
-code, pre {
- font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-}
-
-code {
- padding: 2px 4px;
- font-size: 90%;
- color: #c7254e;
- white-space: nowrap;
- background-color: #f9f2f4;
- border-radius: 4px;
-}
-
-pre {
display: block;
padding: 20px;
margin: 0 0 10px;
@@ -627,45 +557,34 @@ pre {
border-radius: 4px;
}
-pre code {
- padding: 0;
- font-size: inherit;
- color: inherit;
- white-space: pre-wrap;
- background-color: transparent;
- border-radius: 0;
+code,
+pre {
+ font: 1em Menlo, Monaco, Consolas, "Courier New", monospace;
}
code {
- font-family: "Menlo", "Lucida Console", Consolas, monospace;
+ font: 90% "Menlo", "Lucida Console", Consolas, monospace;
+ white-space: nowrap;
background: transparent;
+ border-radius: 4px;
padding: 0;
color: inherit;
}
-.code .sparkop {
- color: #1663a8;
-}
-
-.code .closure {
- color: #c1130e;
+pre code {
+ padding: 0;
+ font-size: inherit;
+ color: inherit;
+ white-space: pre-wrap;
+ background-color: transparent;
+ border-radius: 0;
}
h3 {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-weight: 500;
- line-height: 1.1;
+ font: 500 20px/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #317eac;
-}
-
-h3 {
margin-top: 20px;
margin-bottom: 10px;
- font-size: 20px;
-}
-ul {
- margin-top: 0;
- margin-bottom: 10px;
}
.list-none {
@@ -673,70 +592,21 @@ ul {
padding: 0;
}
-.jumbotron {
- padding: 30px;
- margin-bottom: 30px;
- font-size: 21px;
- font-weight: 200;
- line-height: 2.1428571435;
- color: inherit;
- background-color: #eee;
-}
-
-.container .jumbotron {
- border-radius: 6px;
-}
-
-@media screen and (min-width: 768px) {
- .jumbotron {
- padding-top: 48px;
- padding-bottom: 48px;
- }
-
- .container .jumbotron {
- padding-right: 60px;
- padding-left: 60px;
- }
-}
-
@media screen and (max-width: 990px) {
.navbar-nav {
- font-size: 16px;
+ font-size: 16px;
}
.features .details {
- margin-right: 0 !important;
+ margin-right: 0 !important;
}
}
@media screen and (min-width: 1441px) {
- .navbar-nav, .navbar .nav-item:hover .dropdown-menu {
- font-size: 16px;
- }
-}
-
-.jumbotron {
- padding: 20px 20px;
- margin-bottom: 20px;
- color: rgb(85, 85, 85);
- background: #eef6fd;
- text-align: center;
- line-height: inherit;
-}
-
-.jumbotron {
- font-size: 18px;
-}
-@media (min-width: 768px) {
- .jumbotron {
- font-size: 19px;
- }
-}
-
-@media (min-width: 992px) {
- .jumbotron {
- font-size: 21px;
+ .navbar-nav,
+ .navbar .nav-item:hover .dropdown-menu {
+ font-size: 16px;
}
}
@@ -749,29 +619,32 @@ ul {
text-align: center;
}
-.nav > li > a {
+.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
-.nav > li > a:hover, .nav > li > a:focus {
+.nav>li>a:hover,
+.nav>li>a:focus {
text-decoration: none;
background-color: #eee;
}
-.nav-tabs > li > a {
+.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
-.nav-tabs > li > a:hover {
+.nav-tabs>li>a:hover {
border-color: #eee #eee #ddd;
}
-.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
+.nav-tabs>li.active>a,
+.nav-tabs>li.active>a:hover,
+.nav-tabs>li.active>a:focus {
color: #555;
cursor: default;
background-color: #fff;
@@ -779,7 +652,7 @@ ul {
border-bottom-color: transparent;
}
-.nav.nav-tabs > li > a {
+.nav.nav-tabs>li>a {
padding: 6px 11px;
font-size: 14px;
border-radius: 0;
@@ -794,18 +667,30 @@ ul {
margin-bottom: 30px;
}
-.global h1, .global h2, .global h3, .global h4, .global h5, .global h6, .global .h1, .global .h2, .global .h3, .global .h4, .global .h5, .global .h6 {
+.global h1,
+.global h2,
+.global h3,
+.global h4,
+.global h5,
+.global h6,
+.global .h1,
+.global .h2,
+.global .h3,
+.global .h4,
+.global .h5,
+.global .h6 {
color: #317eac;
- /*display: inline-block;*/
- /*text-transform: lowercase;*/
}
-.global h1, .global h2, .global h3 {
+.global h1,
+.global h2,
+.global h3 {
margin-top: 20px;
margin-bottom: 10px;
}
-.global h1, .global .h1 {
+.global h1,
+.global .h1 {
font-size: 30px;
}
@@ -829,7 +714,18 @@ ul {
font-size: 16px !important;
}
-.global h1:first-letter, .global h2:first-letter, .global h3:first-letter, .global h4:first-letter, .global h5:first-letter, .global h6:first-letter, .global .h1:first-letter, .global .h2:first-letter, .global .h3:first-letter, .global .h4:first-letter, .global .h5:first-letter, .global .h6:first-letter {
+.global h1:first-letter,
+.global h2:first-letter,
+.global h3:first-letter,
+.global h4:first-letter,
+.global h5:first-letter,
+.global h6:first-letter,
+.global .h1:first-letter,
+.global .h2:first-letter,
+.global .h3:first-letter,
+.global .h4:first-letter,
+.global .h5:first-letter,
+.global .h6:first-letter {
text-transform: uppercase;
}
@@ -840,57 +736,18 @@ ul {
color: #8f8f8f;
}
-.global .code {
- font-family: "Menlo", "Lucida Console", Consolas, monospace;
- font-size: 12px;
-}
-
-@media (min-width: 1200px) {
- .global .code {
- font-size: 13px;
- }
-}
-
-.global .code .string {
- color: #2b8eeb;
-}
-
-.global .code .sparkop {
- color: #1663a8;
-}
-
-/*! CSS Used from: http://spark.apache.org/css/cerulean.min.css */
.global figure {
display: block;
-}
-
-.global code, .global pre {
- font-family: monospace, serif;
- font-size: 1em;
-}
-
-.global pre {
- white-space: pre-wrap;
-}
-
-.global figure {
margin: 0;
}
-.global code, .global pre {
- font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-}
-
-.global code {
- padding: 2px 4px;
- font-size: 90%;
- color: #c7254e;
- white-space: nowrap;
- background-color: #f9f2f4;
- border-radius: 4px;
+.global code,
+.global pre {
+ font: 1em Menlo, Monaco, Consolas, "Courier New", monospace;
}
.global pre {
+ white-space: pre-wrap;
display: block;
padding: 9.5px;
margin: 0 0 10px;
@@ -904,6 +761,15 @@ ul {
border-radius: 4px;
}
+.global code {
+ font: 90% "Menlo", "Lucida Console", Consolas, monospace;
+ white-space: nowrap;
+ background: transparent;
+ border-radius: 4px;
+ padding: 0;
+ color: inherit;
+}
+
.global pre code {
padding: 0;
font-size: inherit;
@@ -913,29 +779,6 @@ ul {
border-radius: 0;
}
-.global .code {
- font-family: "Menlo", "Lucida Console", Consolas, monospace;
- font-size: 12px;
-}
-
-@media (min-width: 1200px) {
- .global .code {
- font-size: 13px;
- }
-}
-
-.global code {
- font-family: "Menlo", "Lucida Console", Consolas, monospace;
- background: transparent;
- padding: 0;
- color: inherit;
-}
-
-.global .code-tab {
- margin-bottom: 10px;
- border-bottom: 1px solid #ddd;
-}
-
footer {
text-align: center;
color: #8f8f8f;
@@ -947,12 +790,12 @@ footer a {
display: contents;
}
-h1 .tm, h2 .tm, h3 .tm {
+h1 .tm,
+h2 .tm,
+h3 .tm {
bottom: 10px;
}
-
-
.question {
font-size: 16px;
margin-top: 20px;
@@ -960,7 +803,6 @@ h1 .tm, h2 .tm, h3 .tm {
font-weight: 500;
}
-/* GitHub style blockquote */
blockquote {
display: block;
margin-block-start: 1em;
@@ -969,17 +811,15 @@ blockquote {
margin-inline-end: 40px;
padding: 0 1em;
color: rgba(0, 0, 0, .5);
- border-left: 0.25em solid rgba(0, 0, 0, .1)
+ border-left: 0.25em solid rgba(0, 0, 0, .1);
}
-
.content {
z-index: 1;
position: relative;
background-color: #FFF;
max-width: 914px;
- line-height: 1.6; /* Inspired by GitHub's wiki style */
- /*padding-left: 15px;*/
+ line-height: 1.6;
}
.content-with-sidebar {
@@ -987,15 +827,12 @@ blockquote {
position: relative;
background-color: #FFF;
max-width: 914px;
- line-height: 1.6; /* Inspired by GitHub's wiki style */
+ line-height: 1.6;
padding-left: 30px;
min-height: 100vh;
}
-/**
- * The left navigation bar.
- */
- .left-menu-wrapper {
+.left-menu-wrapper {
margin-left: 0px;
margin-right: 0px;
border-top-width: 0px;
@@ -1016,15 +853,12 @@ blockquote {
line-height: 30px;
}
-/**
- * The collapsing button for the navigation bar.
- */
.nav-trigger {
position: fixed;
clip: rect(0, 0, 0, 0);
}
-.nav-trigger + label:after {
+.nav-trigger+label:after {
content: '»';
}
@@ -1049,52 +883,51 @@ label[for="nav-trigger"]:hover {
background-color: #d0cdcd;
}
-.nav-trigger:checked + label {
+.nav-trigger:checked+label {
margin-left: 200px;
}
-.nav-trigger:checked + label:after {
+.nav-trigger:checked+label:after {
content: '«';
}
-.nav-trigger:checked ~ div.content-with-sidebar {
+.nav-trigger:checked~div.content-with-sidebar {
margin-left: 200px;
}
-.nav-trigger + label, div.content-with-sidebar {
+.nav-trigger+label,
+div.content-with-sidebar {
transition: left 0.4s;
}
-/**
- * Rules to collapse the menu automatically when the screen becomes too thin.
- */
-
@media all and (max-width: 780px) {
-
div.content-with-sidebar {
margin-left: 200px;
}
- .nav-trigger + label:after {
+
+ .nav-trigger+label:after {
content: '«';
}
+
label[for="nav-trigger"] {
margin-left: 200px;
}
- .nav-trigger:checked + label {
+ .nav-trigger:checked+label {
margin-left: 0px;
}
- .nav-trigger:checked + label:after {
+
+ .nav-trigger:checked+label:after {
content: '»';
}
- .nav-trigger:checked ~ div.content-with-sidebar {
+
+ .nav-trigger:checked~div.content-with-sidebar {
margin-left: 0px;
}
div.container-index {
margin-left: -215px;
}
-
}
img {
@@ -1104,18 +937,22 @@ img {
table {
width: 100%;
overflow-wrap: normal;
- border-collapse: collapse; /* Ensures that the borders collapse into a single border */
+ border-collapse: collapse;
}
-table th, table td {
- border: 1px solid #cccccc; /* Adds a border to each table header and data cell */
- padding: 6px 13px; /* Optional: Adds padding inside each cell for better readability */
+table th,
+table td {
+ border: 1px solid #cccccc;
+ padding: 6px 13px;
}
table tr {
- background-color: white; /* Sets a default background color for all rows */
+ background-color: white;
}
+/* Set a different background color for even rows so that the row
+ color alternates.
+ */
table tr:nth-child(2n) {
- background-color: #F1F4F5; /* Sets a different background color for even rows */
+ background-color: #F1F4F5;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@spark.apache.org
For additional commands, e-mail: commits-help@spark.apache.org