Styling a Table with css: Setting the column widths with nth child
To control the width of the columnsin a table, we need to set a width propertyon either the th or the td,and all of the associated th and td elements in a columnwill conform to that particular setting.So if we come over here and take a look at the html,inside of our table, inside of our heading area,we have our first cell element, which is th,and if we set a width property here,the next table cell element,which is this td down here for Mercury,will follow the width settings that we assignedto this particular element here.
So back in our CSS file,we can use something called nth-child,so that we can target a particular element in a groupwithout having to add any additional contentto our html page.Now the way that the nth-child worksis in CSS, we target a group of elements or siblings.In this case, we're looking for the th elementsthat are inside of a table element with an ID of planets.Now the nth-child pseudo-class has a series of parentheses,and inside of the parentheses, we put a number.
So if we put a number one in here,we're going to target the first childof all of those siblings.And similarly, if we put a number threeinside of the parentheses,we would target the third child.So we'll use this technique in our CSS fileto target each of the four siblingsand assign our width properties.So back in our CSS file,let's come up here and copy this rule,table#planets thead th.Let's copy that.Then we'll paste it down here on the next line.
Then we'll add our pseudo-class of nth-child,so :nth-child.Put in our parentheses.Now inside of the parentheses,we'll type in number one.We're gonna target the first element,and that's going to be this element herewith the word planet inside.So that's the first th inside of the thead area.Back in the CSS.Add our beginning and ending brackets.Then inside, we'll set a width property.And just for demonstration purposes,I'm gonna put 50% in here.
So what that will do over here in the previewis allow the very first column of elementsto take up 50% of the width of the entire table,leaving the three remaining columnsto evenly divide the remaining space.And some will even take up a little bit more roomif their content is larger than some of the other elements.So now let's come back to our CSS,and let's change 50% down to 20%.Then let's duplicate this entire line.Let's come in here and change the nth-child to a number two.
We're gonna set the second column to 30%.Let's duplicate this line again.Let's change nth-child(2) to nth-child(3).We're gonna set the width of the third column to 35%,since the label in this particular columnis longer than the other ones.And then we'll duplicate this one more time,nth-child(4).And then we'll change the width of the fourth column to 15%.And you can see the results of all of these new widthsin the browser.
So without adding any additional code to our html file,we can use the nth-child feature of CSSto specifically target siblingsand create our column widths.And now that we have our columns spaced,next we're gonna start workingon the body section of the table.