diff --git a/client/src/components/tables/components/SelectableCompareType.tsx b/client/src/components/tables/components/SelectableCompareType.tsx
index b35efd977..3d719c339 100644
--- a/client/src/components/tables/components/SelectableCompareType.tsx
+++ b/client/src/components/tables/components/SelectableCompareType.tsx
@@ -18,7 +18,7 @@ export default function SelectableCompareType({
 	gptConfig: GamePTConfig;
 } & ZTableTHProps) {
 	return (
-		<th className="vstack gap-1 align-items-center justify-content-center">
+		<th className="gap-1 align-items-center justify-content-center">
 			<select
 				onChange={(v) => setMetric(v.target.value)}
 				value={metric}
diff --git a/client/src/components/tables/components/SelectableRanking.tsx b/client/src/components/tables/components/SelectableRanking.tsx
index 2cb8c44d7..9a14283a0 100644
--- a/client/src/components/tables/components/SelectableRanking.tsx
+++ b/client/src/components/tables/components/SelectableRanking.tsx
@@ -36,33 +36,35 @@ export default function SelectableRanking({
 	}
 
 	return (
-		<th className="vstack gap-1 align-items-center justify-content-center">
-			<select
-				onChange={(v) => setRankingViewMode(v.target.value as RankingViewMode)}
-				value={rankingViewMode}
-				className="border-0 p-0.5 text-body fw-bolder rounded focus-ring focus-ring-light bg-transparent"
-			>
-				<option value="global">Global Ranking</option>
-				<option value="rival">Rival Ranking</option>
-			</select>
-			<div onClick={() => changeSort("Site Ranking")}>
-				<div className="d-flex justify-content-center gap-1">
-					<Icon
-						type="arrow-up"
-						className={
-							currentSortMode === "Rating" && reverseSort
-								? "opacity-100"
-								: "opacity-25"
-						}
-					/>
-					<Icon
-						type="arrow-down"
-						className={
-							currentSortMode === "Rating" && !reverseSort
-								? "opacity-100"
-								: "opacity-25"
-						}
-					/>
+		<th>
+			<div className="vstack gap-1 align-items-center justify-content-center">
+				<select
+					onChange={(v) => setRankingViewMode(v.target.value as RankingViewMode)}
+					value={rankingViewMode}
+					className="border-0 p-0.5 text-body fw-bolder rounded focus-ring focus-ring-light bg-transparent"
+				>
+					<option value="global">Global Ranking</option>
+					<option value="rival">Rival Ranking</option>
+				</select>
+				<div onClick={() => changeSort("Site Ranking")}>
+					<div className="d-flex justify-content-center gap-1">
+						<Icon
+							type="arrow-up"
+							className={
+								currentSortMode === "Rating" && reverseSort
+									? "opacity-100"
+									: "opacity-25"
+							}
+						/>
+						<Icon
+							type="arrow-down"
+							className={
+								currentSortMode === "Rating" && !reverseSort
+									? "opacity-100"
+									: "opacity-25"
+							}
+						/>
+					</div>
 				</div>
 			</div>
 		</th>
diff --git a/client/src/components/tables/components/SelectableRating.tsx b/client/src/components/tables/components/SelectableRating.tsx
index 7fc36e94e..08ce90e29 100644
--- a/client/src/components/tables/components/SelectableRating.tsx
+++ b/client/src/components/tables/components/SelectableRating.tsx
@@ -36,37 +36,39 @@ export default function SelectableRating<GPT extends GPTString>({
 	}
 
 	return (
-		<th className="vstack gap-1 align-items-center justify-content-center">
-			<select
-				onChange={(v) => setRating(v.target.value as AllRatings<GPT>)}
-				value={rating}
-				className="border-0 text-body fw-bolder bg-transparent rounded focus-ring focus-ring-light"
-			>
-				{Object.keys(gptConfig[key]).map((s) => (
-					<option key={s} value={s}>
-						{UppercaseFirst(s)}
-					</option>
-				))}
-			</select>
-			<div onClick={() => changeSort("Rating")}>
-				<span className="d-flex justify-content-center gap-1">
-					<Icon
-						type="arrow-up"
-						className={
-							currentSortMode === "Rating" && reverseSort
-								? "opacity-100"
-								: "opacity-25"
-						}
-					/>
-					<Icon
-						type="arrow-down"
-						className={
-							currentSortMode === "Rating" && !reverseSort
-								? "opacity-100"
-								: "opacity-25"
-						}
-					/>
-				</span>
+		<th>
+			<div className="vstack gap-1 align-items-center justify-content-center">
+				<select
+					onChange={(v) => setRating(v.target.value as AllRatings<GPT>)}
+					value={rating}
+					className="border-0 text-body fw-bolder bg-transparent rounded focus-ring focus-ring-light"
+				>
+					{Object.keys(gptConfig[key]).map((s) => (
+						<option key={s} value={s}>
+							{UppercaseFirst(s)}
+						</option>
+					))}
+				</select>
+				<div onClick={() => changeSort("Rating")}>
+					<span className="d-flex justify-content-center gap-1">
+						<Icon
+							type="arrow-up"
+							className={
+								currentSortMode === "Rating" && reverseSort
+									? "opacity-100"
+									: "opacity-25"
+							}
+						/>
+						<Icon
+							type="arrow-down"
+							className={
+								currentSortMode === "Rating" && !reverseSort
+									? "opacity-100"
+									: "opacity-25"
+							}
+						/>
+					</span>
+				</div>
 			</div>
 		</th>
 	);