Skip to content

[SPARK-46464][DOC] Fix the scroll issue of tables when overflow #44423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
yaooqinn wants to merge 4 commits into from
Closed

[SPARK-46464][DOC] Fix the scroll issue of tables when overflow #44423

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
652b87f
[SPARK-46464][DOC] Fix the scroll issue of tables when overflow
yaooqinn Dec 20, 2023
8fe81d0
Merge branch 'master' into SPARK-46464
yaooqinn Dec 20, 2023
8458e39
Revert "[SPARK-46464][DOC] Fix the scroll issue of tables when overflow"
yaooqinn Dec 21, 2023
309adcc
overflow-x
yaooqinn Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/building-spark.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,7 @@ If use an individual repository or a repository on GitHub Enterprise, export bel

### Related environment variables

<div class="table-wrapper">
Copy link
Contributor

@nchammas nchammas Dec 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a CSS expert, but instead of adding a new div all over the place, couldn't we just add the appropriate styling in the main CSS file directly to all table elements?

Copy link
Member Author

@yaooqinn yaooqinn Dec 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gettalong/kramdown#69

<table>
<thead><tr><th>Variable Name</th><th>Default</th><th>Meaning</th></tr></thead>
<tr>
Expand All @@ -301,6 +302,7 @@ If use an individual repository or a repository on GitHub Enterprise, export bel
</td>
</tr>
</table>
</div>

### Building and testing on IPv6-only environment

Expand Down
2 changes: 2 additions & 0 deletions docs/cluster-overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ The [job scheduling overview](job-scheduling.html) describes this in more detail

The following table summarizes terms you'll see used to refer to cluster concepts:

<div class="table-wrapper">
<table>
<thead>
<tr><th style="width: 130px;">Term</th><th>Meaning</th></tr>
Expand Down Expand Up @@ -145,3 +146,4 @@ The following table summarizes terms you'll see used to refer to cluster concept
</tr>
</tbody>
</table>
</div>
40 changes: 40 additions & 0 deletions docs/configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ of the most common options to set are:

### Application Properties

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -544,11 +545,13 @@ of the most common options to set are:
<td>3.5.0</td>
</tr>
</table>
</div>

Apart from these, the following properties are also available, and may be useful in some situations:

### Runtime Environment

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -933,9 +936,11 @@ Apart from these, the following properties are also available, and may be useful
<td>2.1.0</td>
</tr>
</table>
</div>

### Shuffle Behavior

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -1308,9 +1313,11 @@ Apart from these, the following properties are also available, and may be useful
<td>3.4.0</td>
</tr>
</table>
</div>

### Spark UI

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -1700,9 +1707,11 @@ Apart from these, the following properties are also available, and may be useful
<td>3.4.0</td>
</tr>
</table>
</div>

### Compression and Serialization

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -1917,9 +1926,11 @@ Apart from these, the following properties are also available, and may be useful
<td>1.0.0</td>
</tr>
</table>
</div>

### Memory Management

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -2042,9 +2053,11 @@ Apart from these, the following properties are also available, and may be useful
<td>1.4.0</td>
</tr>
</table>
</div>

### Execution Behavior

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -2287,9 +2300,11 @@ Apart from these, the following properties are also available, and may be useful
<td>2.2.0</td>
</tr>
</table>
</div>

### Executor Metrics

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -2355,9 +2370,11 @@ Apart from these, the following properties are also available, and may be useful
<td>3.1.0</td>
</tr>
</table>
</div>

### Networking

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -2518,9 +2535,11 @@ Apart from these, the following properties are also available, and may be useful
<td>3.2.0</td>
</tr>
</table>
</div>

### Scheduling

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -2999,9 +3018,11 @@ Apart from these, the following properties are also available, and may be useful
<td>3.4.0</td>
</tr>
</table>
</div>

### Barrier Execution Mode

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -3046,9 +3067,11 @@ Apart from these, the following properties are also available, and may be useful
<td>2.4.0</td>
</tr>
</table>
</div>

### Dynamic Allocation

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -3181,6 +3204,7 @@ Apart from these, the following properties are also available, and may be useful
<td>3.0.0</td>
</tr>
</table>
</div>

### Thread Configurations

Expand All @@ -3191,6 +3215,7 @@ finer granularity starting from driver and executor. Take RPC module as example
like shuffle, just replace "rpc" with "shuffle" in the property names except
<code>spark.{driver|executor}.rpc.netty.dispatcher.numThreads</code>, which is only for RPC module.

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -3218,6 +3243,7 @@ like shuffle, just replace "rpc" with "shuffle" in the property names except
<td>3.0.0</td>
</tr>
</table>
</div>

The default value for number of thread-related config keys is the minimum of the number of cores requested for
the driver or executor, or, in the absence of that value, the number of cores available for the JVM (with a hardcoded upper limit of 8).
Expand All @@ -3229,6 +3255,7 @@ the driver or executor, or, in the absence of that value, the number of cores av
Server configurations are set in Spark Connect server, for example, when you start the Spark Connect server with `./sbin/start-connect-server.sh`.
They are typically set via the config file and command-lineoptions with `--conf/-c`.

<div class="table-wrapper">
<table class="table">
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -3293,6 +3320,7 @@ Command types in proto.</td>
<td>3.4.0</td>
</tr>
</table>
</div>

### Security

Expand Down Expand Up @@ -3334,6 +3362,7 @@ External users can query the static sql config values via `SparkSession.conf` or

### Spark Streaming

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -3463,9 +3492,11 @@ External users can query the static sql config values via `SparkSession.conf` or
<td>1.6.0</td>
</tr>
</table>
</div>

### SparkR

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -3519,9 +3550,11 @@ External users can query the static sql config values via `SparkSession.conf` or
</tr>

</table>
</div>

### GraphX

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand All @@ -3534,6 +3567,7 @@ External users can query the static sql config values via `SparkSession.conf` or
<td>2.2.0</td>
</tr>
</table>
</div>

### Cluster Managers

Expand All @@ -3559,6 +3593,7 @@ copy `conf/spark-env.sh.template` to create it. Make sure you make the copy exec
The following variables can be set in `spark-env.sh`:


<div class="table-wrapper">
<table>
<thead><tr><th style="width:21%">Environment Variable</th><th>Meaning</th></tr></thead>
<tr>
Expand Down Expand Up @@ -3589,6 +3624,7 @@ The following variables can be set in `spark-env.sh`:
<td>Hostname your Spark program will advertise to other machines.</td>
</tr>
</table>
</div>

In addition to the above, there are also options for setting up the Spark
[standalone cluster scripts](spark-standalone.html#cluster-launch-scripts), such as number of cores
Expand Down Expand Up @@ -3696,6 +3732,7 @@ Push-based shuffle helps improve the reliability and performance of spark shuffl

### External Shuffle service(server) side configuration options

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -3727,9 +3764,11 @@ Push-based shuffle helps improve the reliability and performance of spark shuffl
<td>3.2.0</td>
</tr>
</table>
</div>

### Client side configuration options

<div class="table-wrapper">
<table>
<thead><tr><th>Property Name</th><th>Default</th><th>Meaning</th><th>Since Version</th></tr></thead>
<tr>
Expand Down Expand Up @@ -3825,3 +3864,4 @@ Push-based shuffle helps improve the reliability and performance of spark shuffl
<td>3.3.0</td>
</tr>
</table>
</div>
7 changes: 0 additions & 7 deletions docs/css/bootstrap.min.css
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion docs/css/bootstrap.min.css.map
View file
Open in desktop

This file was deleted.

6 changes: 6 additions & 0 deletions docs/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1112,11 +1112,13 @@ table {
width: 100%;
overflow-wrap: normal;
border-collapse: collapse; /* Ensures that the borders collapse into a single border */
word-break: normal;
Copy link
Contributor

@nchammas nchammas Dec 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you add overflow-x: auto; here, does it solve the problem without needing all the new divs?

Copy link
Member Author

@yaooqinn yaooqinn Dec 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes sense to me, let me add it to somewhere else

}

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 */
max-width: 895px; /* Adjusted to `max-width(914px) of .content - padding` to avoid hidden content from a single cell */
Copy link
Contributor

@nchammas nchammas Dec 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, so without this some table cells hide their content?

Copy link
Member Author

@yaooqinn yaooqinn Dec 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No.

}

table tr {
Expand All @@ -1126,3 +1128,7 @@ table tr {
table tr:nth-child(2n) {
background-color: #F1F4F5; /* Sets a different background color for even rows */
}

.table-wrapper {
overflow-x: auto;
}
Loading