|
|
@@ -607,6 +607,20 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
|
|
|
margin-bottom: 15px;
|
|
|
table-layout: fixed;
|
|
|
width: 100%;
|
|
|
+ // We want these `div` inside `th` and `td` to have a 100% height:
|
|
|
+ // 1. `td > div.plans-v2-table-cell`
|
|
|
+ // 2. `th > div.plans-v2-table-th-content`
|
|
|
+ //
|
|
|
+ // To make both of them have 100% height of their respective `td` and `th`,
|
|
|
+ // we need to have the `table` has an explicit `height` rule.
|
|
|
+ // The value can be arbitrary, since it will be ignored by the browser
|
|
|
+ //
|
|
|
+ // See https://stackoverflow.com/a/56913789 for more details
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ tr {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
|
|
|
th,
|
|
|
td {
|
|
|
@@ -644,6 +658,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
|
|
|
|
|
|
td {
|
|
|
vertical-align: middle;
|
|
|
+ height: 100%;
|
|
|
|
|
|
&:first-child {
|
|
|
border-left: 0;
|
|
|
@@ -758,6 +773,10 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
|
|
|
.plans-v2-table-cell {
|
|
|
background-color: @white;
|
|
|
padding: 6px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
|
|
|
.plans-v2-table-th-content {
|