3
\$\begingroup\$

This code below works as needed, but I am not sure if there is a more elegant way with pure CSS. I have a table with two columns, and 4+ rows. I'll actually upload a picture. It's the first table in grey that I am messing with.

enter image description here

I want to select all the TDs--except for the first TD, because that first one has been changed to vertical text--and give them a 100% width and text align center. Any thoughts?

.greyBG tr:nth-of-type(1) ~ tr > td {
    width: 100%;
    text-align: center;
}

And the HTML:

<table class="greyBG">
         <tbody>
            <tr>
               <td rowspan="5" class="tableHeader">Landscape</td>
            </tr>
            <tr>
               <td>Lorum Ipsum</td>
             </tr>
             <tr>
                <td>Lorum Ipsum</td>
              </tr>
              <tr>
                 <td>Lorum Ipsum</td>
              </tr>
              <tr>
                  <td>Lorum Ipsum</td>
              </tr>
           </tbody>
     </table>
\$\endgroup\$
2
  • 1
    \$\begingroup\$ Please post the HTML that goes with the question as well. Also, could you clarify which cells you want to select? (Everything except the one that says "Landscape"?) \$\endgroup\$ Sep 30, 2014 at 0:04
  • \$\begingroup\$ Correct, all cells in the grey table except for the one that says Landscape. Also, I should clarify that "Category" is not a part of the table. \$\endgroup\$
    – Jeff.Clark
    Sep 30, 2014 at 0:14

2 Answers 2

3
\$\begingroup\$

Markup

If you have a td that you're giving a class that indicates that it is some sort of heading, you should be using a th instead. The th element is allowed to appear in a tbody, it isn't restricted to thead.

When validated, this table will generate warnings regarding different numbers of cells in each row. The correct structure should look like this:

<table class="greyBG">
    <tbody>
        <tr>
            <th rowspan="4">Landscape</th>
            <td>Lorum Ipsum</td>
        </tr>
        <tr>
            <td>Lorum Ipsum</td>
        </tr>
        <tr>
            <td>Lorum Ipsum</td>
        </tr>
        <tr>
            <td>Lorum Ipsum</td>
        </tr>
    </tbody>
</table>

Be consistent with your indentation.

CSS

Now that the markup is simplified, it's child's play to simplify the CSS

.greyBG td {
    width: 100%;
    text-align: center;
}

Demo: http://codepen.io/cimmanon/pen/GqKcx

\$\endgroup\$
1
  • \$\begingroup\$ Well played sir :) \$\endgroup\$
    – Jeff.Clark
    Oct 1, 2014 at 7:41
0
\$\begingroup\$

building off @cimmanon's answer, here's two improvements for your markup and styles,:

1: Accessibility Improvements:
the example needs a header, so lets add that along with thead and tbody to the markup. the header spans two columns, so we're going to use the colspan attribute to stretch the th across both.
in the same fashion, the table body header spans the four rows of the table body's content, so lets add rowspan="4" to it and force it to stretch across all four rows of content.
styling here (one table, not three like your image) is minimal and gets the job done, except for older versions of IE in regards to the translate property declaration. but thats just the icing on the cake, and to prove my points: the really important part is the markup, which is Accessible, as well as valid html5.
you can view this example here:
http://codepen.io/jalbertbowden/pen/yugAH

2: Accessible Altered Styles Working Demo:
you can use thead for each table, although i do not think that markup will work in this case; however, you should be using thead in your tables for semantics, but more importantly accessibility. implemented them gives you markup like:


<table class="table-color-01">
  <thead>
    <tr><th colspan="2">Category</th></tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="4">Landscape</th>
      <td>Range Geography</td>
    </tr>  
    <tr><td>Size</td></tr>
    <tr><td>Topography</td></tr>
    <tr><td>Elevation</td></tr>
  </tbody>
</table>
<table class="table-color-02">
  <thead>
    <tr><th>Pendleton</th></tr>
  </thead>
  <tbody>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
    <tr><td>Row 4</td></tr>
  </tbody>
</table>
<table class="table-color-03">
  <thead>
    <tr><th>Warm Springs</th></tr>
  </thead>
  <tbody>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
    <tr><td>Row 4</td></tr>
  </tbody>
</table>

and the styles:


table{float: left; margin-left:10px; width:250px; text-align:center; border-collapse:collapse}

.table-color-01 thead{background-color:#666}
.table-color-02 thead{background-color:#333}
.table-color-03 thead{background-color:#999}

tbody th,td{border-width:1px; border-style:solid}

.table-color-01 td,.table-color-01 tbody th{color:#666; border-color:#666}
.table-color-02 td{color:#333}
.table-color-03 td{color:#999}

thead{color:#fff; text-transform:uppercase}

tbody th{transform:rotate(-90deg);}

you can view a codepen of this here:
http://codepen.io/jalbertbowden/pen/luAGo

the class names are blatant for the example's sake, and i would give the tbody th a class instead of targeting it how it is, but i prefer classes to document element chains, typically providing better performance in doing such.
i ditched the span because its unnecessary in this case, and as such is just bloat.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.