Targeting specific elements with CSS only

Question

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.

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>

Answer 1

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

Answer 2

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.