mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-07 06:02:06 -04:00
fix(curriculum): update step-53 td width workshop balance sheet (#66327)
This commit is contained in:
@@ -7,7 +7,7 @@ dashedName: step-53
|
||||
|
||||
# --description--
|
||||
|
||||
Create a selector to target your `td` elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container.
|
||||
Create a selector to target your `td` elements within your table body and set their `width` to `4rem`. This will ensure the table body cells have a consistent width and align properly with the columns above.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,35 +17,13 @@ You should have a `tbody td` selector.
|
||||
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('tbody td'));
|
||||
```
|
||||
|
||||
Your `tbody td` selector should have a `width` property set to `100vw`.
|
||||
Your `tbody td` selector should have a `width` property set to `4rem`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
new __helpers.CSSHelp(document)
|
||||
.getStyle('tbody td')
|
||||
?.getPropertyValue('width'),
|
||||
'100vw'
|
||||
);
|
||||
```
|
||||
|
||||
Your `tbody td` selector should have a `min-width` property set to `4rem`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
new __helpers.CSSHelp(document)
|
||||
.getStyle('tbody td')
|
||||
?.getPropertyValue('min-width'),
|
||||
'4rem'
|
||||
);
|
||||
```
|
||||
|
||||
Your `tbody td` selector should have a `max-width` property set to `4rem`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
new __helpers.CSSHelp(document)
|
||||
.getStyle('tbody td')
|
||||
?.getPropertyValue('max-width'),
|
||||
'4rem'
|
||||
);
|
||||
```
|
||||
|
||||
@@ -255,9 +255,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@@ -266,9 +266,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
|
||||
@@ -268,9 +268,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
|
||||
@@ -268,9 +268,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
|
||||
@@ -257,9 +257,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
|
||||
@@ -255,9 +255,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
|
||||
@@ -253,9 +253,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
|
||||
@@ -258,9 +258,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
|
||||
@@ -277,9 +277,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
|
||||
@@ -301,9 +301,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
|
||||
@@ -246,9 +246,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
|
||||
@@ -273,9 +273,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
|
||||
@@ -255,9 +255,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
@@ -541,9 +539,7 @@ table caption {
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
|
||||
Reference in New Issue
Block a user