From the course: Design the Web: Styling a Table

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Setting the column widths with nth child

Setting the column widths with nth child - phpMyAdmin Tutorial

From the course: Design the Web: Styling a Table

Start my 1-month free trial Buy for my team

Setting the column widths with nth child

“

- [Voiceover] To control the width of the columns in a table, we need to set a width property on either the th or the td, and all of the associated th and td elements in a column will 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 assigned to 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 group without having to add any additional content to our html page. Now the way that the nth-child works is in CSS, we target a group of elements or siblings. In this case, we're looking for the th elements that are inside of a table element with an ID of planets. Now the nth-child pseudo-class has a series of parentheses, and…

Contents