# tablepress/3.4/admin/css/edit.scss

TablePress – Tables in WordPress made easy, version 3.4. 377 lines.

- Page: https://pluginprobe.com/plugins/tablepress/3.4/code/admin/css/edit.scss
- Raw: https://pluginprobe.com/plugins/tablepress/3.4/raw/admin/css/edit.scss
- Modified: 2026-09-30T03:50:46+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/tablepress/3.4/code/admin/css/edit.scss#L10-L20`.

```scss
/**
 * CSS code for the "Edit" screen
 *
 * @package TablePress
 * @subpackage Views CSS
 * @author Tobias Bäthge
 * @since 1.0.0
 */

/* Container for Advanced Editor and Help Box dialogs. */
.hidden-container {
	display: none;
}

.postbox {
	scroll-margin-top: 72px;
}

/* Positioning of the "Help" button in the header section of a postbox. */
.postbox .postbox-header .hndle {
	&:has(> .help-container) {
		justify-content: flex-start;
		gap: 12px;
	}

	> .help-container {
		height: 24px;
	}
}

/* Allow wide postboxes to scroll sideways. */
body,
div#post-body.metabox-holder.columns-1 {
	overflow: visible !important;
}

/* Add space between the screen options fieldsets. */
#tablepress-screen-options {
	margin-top: 20px;
}

/* Move backdrop of the wpLink dialog above the "Advanced Editor" dialog. */
body #wp-link-backdrop {
	z-index: 100103;
}

/* Fix height of the wpLink dialog, to prevent vertical scrolling in WP 7.0+. */
body[class*="branch-7-"] #wp-link-wrap {
	height: 642px;
	margin-top: -321px;
}

/* Header Bar. */
#tablepress-header-bar-section {
	margin-bottom: 20px;
	padding: 8px 12px;
	border: 1px solid #c3c4c7;
	background: #ffffff;

	/* Sticky at top of page. */
	@media screen and (min-width: 601px) {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 32px) - 1px); /* 1px offset to remove top border. */
		z-index: 9989; /* Above the table editor, but below the admin menu and WP Pointers. */
	}
	/* Full width on smaller screens, to prevent the table editor from being visible near the right edge when scrolling. */
	@media screen and (min-width: 601px) and (max-width: 782px) {
		margin-left: -11px;
		margin-right: -21px;
	}

	/* Fixed left header bar, taking into account the width of the admin menu. */
	.tablepress-header-bar-wrapper {
		max-width: 1000px;

		body & {
			position: sticky;
			left: 172px;
		}
		body.folded & {
			left: 48px;
		}
		body.auto-fold & {
			@media only screen and (max-width: 960px) {
				left: 48px;
			}
			@media screen and (max-width: 782px) {
				left: 0;
			}
		}
	}
}

/* Table name and ID display in header. */
.tablepress-header-table-name,
.tablepress-header-table-id {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Table Editor Toolbar. */
#tablepress-table-editor-toolbar-section {
	margin: -6px 0 0;
	padding: 4px 0;
	background: #ffffff;

	/* Sticky at top of page. */
	@media screen and (min-width: 601px) {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 32px) + 53px);
		z-index: 9988; /* Above the table editor, but below the admin menu, WP Pointers, and the Header Bar. */
	}
	@media screen and (min-width: 601px) and (max-width: 782px) {
		top: calc(var(--wp-admin--admin-bar--height, 32px) + 60px);
	}

	/* Fixed left toolbar, taking into account the width of the admin menu. */
	.tablepress-toolbar-scroll-wrapper {
		body & {
			position: sticky;
			left: 172px;
			width: auto;
		}
		body.folded & {
			left: 48px;
		}
		body.auto-fold & {
			@media only screen and (max-width: 960px) {
				left: 48px;
			}
			@media screen and (max-width: 782px) {
				left: 0;
			}
		}
	}

	/* Backward compatibility with WP < 6.9. */
	.components-button.is-compact.has-icon:not(.has-text) {
		width: auto;
	}

	.tablepress-toolbar-button-text {
		font-weight: normal;

		@media screen and (max-width: 600px) {
			display: none;
		}
	}
}

/* Background color for the readonly Shortcode text field. */
#table-information-shortcode {
	&,
	+ .components-input-control__suffix {
		background-color: #f0f0f1;
	}
}

/* Styling and positioning of buttons in wpdialogs. */
.wp-core-ui .ui-dialog {
	.button {
		box-shadow: none;
	}
	.ui-dialog-buttonset {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.button-cancel,
	.button-cancel:hover {
		color: #cc1818;
		border-color: transparent;
		background-color: transparent;
		text-decoration: underline;
	}
	.button-cancel:hover {
		text-decoration: none;
	}
}

/* Content of the Advanced Editor wpdialog. */
#advanced-editor {
	padding: 5px;

	.wp-editor-container {
		border: none;
	}
}

#tablepress-page #tablepress_edit-table-data {
	display: inline-block; /* Stretch to the width of the table... */
	min-width: calc(100% - 2px); /* but use the full width, minus 2px to account for the borders. */
}

/* Jspreadsheet CSS. */

#table-editor {
	font-size: 14px;
}

/* Minimum row height, using :after to keep resize animation. */
.jexcel > tbody > tr:after {
	content: "";
	display: inline-block;
	min-height: 22px;
}

.jexcel > thead > tr > td {
	text-align: center !important;
	z-index: 22; /* Prevent drag corner from floating above fixed header. */

	/* Use custom sorting arrow icons. */
	&:not(:first-child,.dragging,.dragging-left,.dragging-right) {
		/* stylelint-disable-next-line function-url-quotes */
		background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23999' d='M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45zm0-384q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z'/%3E%3C/svg%3E");
		background-position: center right 10px;
		background-repeat: no-repeat;
	}
	&.arrow-up:not(.dragging,.dragging-left,.dragging-right) {
		/* stylelint-disable-next-line function-url-quotes */
		background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
	}
	&.arrow-down:not(.dragging,.dragging-left,.dragging-right) {
		/* stylelint-disable-next-line function-url-quotes */
		background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1408 704q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z'/%3E%3C/svg%3E");
	}
}

/* Override default opacity, to not have text shine through when the header row/column is fixed to the top/left of the screen. */
.jexcel > thead > tr > td.dragging,
.jexcel > tbody > tr.dragging > td {
	background-color: #ffffff;
	opacity: 1;
}

.jexcel > tbody > tr > td {
	vertical-align: top;
	word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */
	padding: 0;

	&:first-child {
		padding: 4px;
	}

	/* Show all lines of text in an edited cell. */
	&.editing {
		--table-editor-line-clamp-editing: 0;
	}

	> div {
		display: -webkit-box;
		-webkit-line-clamp: var(--table-editor-line-clamp-editing, var(--table-editor-line-clamp));
		-webkit-box-orient: vertical;
		overflow: hidden;
		padding: 4px;
	}
}

/* Fixed header. */
.admin-bar .jexcel > thead > tr > td {
	@media screen and (min-width: 601px) {
		top: calc(var(--wp-admin--admin-bar--height) + 118px); /* Offset for the Header Bar and Toolbar, minus top and bottom borders. */
	}
	@media screen and (min-width: 783px) {
		top: calc(var(--wp-admin--admin-bar--height) + 111px); /* Offset for the Header Bar and Toolbar, minus top and bottom borders. */
	}
}

/* Fixed left column, taking into account the width of the admin menu. */
.jexcel > tbody > tr > .jexcel_row {
	body & {
		position: sticky;
		z-index: 21; /* Prevent drag corner from floating above fixed left column. */
		left: 160px;
	}
	body.folded & {
		left: 36px;
	}
	body.auto-fold & {
		@media only screen and (max-width: 960px) {
			left: 36px;
		}
		@media screen and (max-width: 782px) {
			left: 0;
		}
	}
}

.jexcel tbody tr:nth-child(even) td:not(.jexcel_row) {
	background-color: #f9f9f9;
}

.jexcel_container .jexcel tbody tr td.highlight {
	background-color: rgba(0, 94, 255, 0.05);
}

.jexcel_container .jexcel tbody tr.head-row td:not(.jexcel_row):not(.column-hidden),
.jexcel_container .jexcel tbody tr.foot-row td:not(.jexcel_row):not(.column-hidden) {
	background-color: #d9edf7;
}

.jexcel_container .jexcel tbody tr.row-hidden td:not(.jexcel_row),
.jexcel_container .jexcel tbody tr td.column-hidden {
	background-color: rgba(255, 224, 224, 0.7);
}

.jexcel > tbody > tr > .highlight {
	&-top {
		border-top: 1px solid rgb(82, 146, 247);
	}
	&-left {
		border-left: 1px solid rgb(82, 146, 247);
	}
	&-right {
		border-right: 1px solid rgb(82, 146, 247);
	}
	&-bottom {
		border-bottom: 1px solid rgb(82, 146, 247);
	}
}

.jexcel_corner {
	background-color: rgb(82, 146, 247);
}

.jexcel > tbody > tr > td > textarea {
	font-size: inherit;
	box-shadow: none;
	padding: 3px !important;
	line-height: 1 !important;
}

/* Fullscreen mode. */
.admin-bar .jexcel_container.fullscreen .jexcel > thead > tr > td {
	top: 0;
}
.jexcel_container.fullscreen {
	z-index: 99999;
}

/* Context menu. */
.jcontextmenu {
	margin: 1px; /* Don't trigger actions by accident */
	z-index: 99999; /* Hover above WP Admin bar */
	background-color: var(--wpds-color-background-surface-neutral-strong, #ffffff); /* stylelint-disable-line plugin-wpds/no-token-fallback-values */
	border-radius: 4px;

	> div {
		padding: 4px 4px 4px 16px;
		color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e); /* stylelint-disable-line plugin-wpds/no-token-fallback-values */
		font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif); /* stylelint-disable-line plugin-wpds/no-token-fallback-values */

		&.header {
			display: none !important;
		}

		&:hover {
			background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, #ffffff)); /* stylelint-disable-line plugin-wpds/no-token-fallback-values */
		}

		a {
			font-size: 13px;
			color: #1e1e1e;
		}
	}
	> .jcontextmenu-disabled,
	> .jcontextmenu-disabled a {
		color: #999999;
		cursor: default;
	}
	> div.jcontextmenu-disabled:hover {
		background: transparent;
	}
}

```