Tables have got to be the most awkward set of elements offered by the HTML spec. Both JavaScript and CSS have their issues in dealing with tables, yet they still remain the most popular way to not only present data, but to render a sites layout.<\/p>\n
Without CSS 3 and JavaScript, you can get by using :first-child and sibling selectors to style most basic table structures. But what happens, when attributes such as rowspan are thrown into the mix?<\/p>\n
This presents an issue for both :first-child<\/em> and sibling<\/em> selectors, as it doesn't always accurately return the first child or sibling on the rendered table.<\/p>\n Take, for example, the following table:<\/p>\n \n\tOn the rendered table, tr td:first-child<\/em> will return the first row and column, but will also select the first-row and column of the second row (visually). :first-child will also select the second row, second column. This presents an issue when we want to use CSS to style our table.<\/p>\n jQuery to the rescue. By using the [rowspan]<\/em> selector, we can add a class on all table cells that make use of the rowspan attribute:<\/p>\n \t<\/code><\/p>\n This then makes our CSS a little more flexible:<\/p>\n Tables have got to be the most awkward set of elements offered by the HTML spec. Both JavaScript and CSS have their issues in dealing…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12],"tags":[145],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/453"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=453"}],"version-history":[{"count":1,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/453\/revisions"}],"predecessor-version":[{"id":454,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/453\/revisions\/454"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<table>
\n\t<tbody>
\n\t<tr>
\n\t <td rowspan="2">x<\/td>
\n\t <td>x<\/td>
\n\t<\/tr>
\n\t<tr>
\n\t <td>x<\/td>
\n\t<\/tr>
\n\t<\/table>
\n\t<\/code><\/p>\n$('td[rowspan]').addClass('hasRowSpan');<\/p>\ntable tr td.hasRowSpan { } \/* first column (visually) *\/
\n\ttable tr td:first-child, table tr td.hasRowSpan + td { } \/* second column (visually) *\/
\n\ttable tr td:first-child + td + td { } \/* third column (visually) *\/
\n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"