Rocket.Chat/app/theme/client/imports/components/table.css

.rc-table {
	width: 100%;

	color: var(--rc-color-primary-light);

	font-size: 0.875rem;

	font-weight: 500;

	&-content {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;

		height: 100%;
		min-height: 200px;
		justify-content: stretch;
	}

	&--fixed {
		table-layout: fixed;
	}

	& tbody {
		& tr:not(.table-no-click):not(.table-no-pointer) {
			cursor: pointer;

			&:hover {
				background-color: var(--rc-color-primary-lightest);
			}
		}
	}

	& th,
	& td {
		vertical-align: middle;

		&.bold {
			font-weight: 600;
		}
	}

	& th {
		height: 0;

		padding-top: 0;
		padding-bottom: 0;

		white-space: nowrap;

		color: transparent;

		font-size: 0.75rem;

		line-height: 0;

		& > .rc-icon {
			display: none;
		}
	}

	& td {

		overflow: hidden;

		padding: 0.25rem 0;

		white-space: nowrap;
		text-overflow: ellipsis;

		font-size: 0.9rem;
		line-height: 1rem;
	}

	&-wrapper {
		display: flex;

		overflow: hidden;

		flex: 1 1 auto;

		align-items: stretch;
	}

	&-subtitle {
		overflow: hidden;

		text-overflow: ellipsis;

		color: var(--rc-color-primary-light);
	}

	&-title {
		overflow: hidden;

		white-space: nowrap;

		text-overflow: ellipsis;

		color: var(--rc-color-primary);

		line-height: normal;

		& .rc-icon {
			margin: 0 -4px;

			font-size: 1rem;
		}
	}

	&-avatar {
		flex: 0 0 auto;

		width: 26px;
		height: 26px;
		margin: 2px 4px;

		border-radius: 2px;

		background-repeat: no-repeat;
		background-position: center center;

		background-size: contain;
	}

	&-info {
		display: flex;

		overflow: hidden;

		flex-direction: column;

		width: 1%;

		margin: 0 4px;

		white-space: nowrap;

		text-overflow: ellipsis;
		flex-grow: 1;

		justify-content: space-around;
	}

	&-td {
		&--small {
			width: 80px;
		}

		&--medium {
			width: 200px;
		}
	}

	&-icon {
		color: var(--color-dark-light);
	}
}

.table-wrapper {
	position: relative;

	flex: 1 1 auto;

	height: 100%;
}

.table-content-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	display: flex;
	flex-direction: column;
}

.table-content {
	display: flex;
	flex-direction: column;

	min-height: 0;
	margin-bottom: 1rem;
	flex-grow: 1;
}

.table-scroll {
	overflow: auto;

	min-height: 0;

	margin-top: 2rem;
	margin-bottom: 0.5rem;

	border-top: 1px solid rgba(216, 216, 216, 0.4);
	flex-grow: 1;
}

.table-fake-th {
	position: absolute;

	top: 0;

	display: block;

	display: flex;

	padding: 0.5rem 0;

	text-align: left;

	color: var(--rc-color-primary-light);

	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1rem;

	& .rc-icon {
		fill: var(--rc-color-primary-light);
	}
}

.table-tr-dummy {
	height: 1rem;
}

.table-column-date {
	overflow: hidden;

	width: 120px;

	white-space: nowrap;
	text-transform: capitalize;
	text-overflow: ellipsis;
}

.table-no-click {
	height: 10px;
}

.table-loading-td {
	position: relative;
}