Cant get CSS to aply on my HTML. Building Table with Buttons and Images and Text (using bootstrap)

im trying just about a whole day now to get my complicated table working as i wish it to do. So first a little explanation. I want a Table with 4x4 (rows x columns). First row will only have the heading title, just one title for all 4 columns. Second row will have one dropdown button each column (so 4 buttons). Third row should contain 4 Images one for each column. And the fourth row some simple text description for each column. Now ive created the table and buttons using the guide from bootstrap. They show up fine, but i cant get CSS to align the content and hide the lines(borders). Ive used already an Element type Selector, an ID Selector, A Class Selector, a Descendant Combinator and a Child Combinator. I was trying to make it work for hours before asking for help here. If anybody has an idea why it doesnt work, please share. Im pretty sure now that there is a mistake in my html or some styles dont apply because of a conflict(im not quite sure if this is even possible in my table) Anyway im posting my HTML and some CSS lines i tried.

I use a theme in wordpress so not quite sure what bootstrap version is active but i think Version 2.3.2 At least the other stuff i created works fine.

  <table class="table table-bordered">
<tr>
   <th colspan="4"><h1>Eat healthy live long</th>
       </tr>
<tr>
    <td><div class="btn-group">
    <a class="dropdown-toggle btn-large btn-success" data-toggle="dropdown" href="#">
    Choose Recipe to cook
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
   <li><a tabindex="-1" href="#/">Chicken ala polita</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#/">Salad with pasta and shrimps</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#/">Turlu in the oven</a></li>
    <!-- dropdown menu links -->
    </ul>
    </div></td>
    <td>some other BUTTON</td><td>Just one more BUTTON</td><td>and finally the last BUTTON</td>
                 </tr>
<tr>
      <td><img src="http://ift.tt/1nQrO9e" alt="" width="220"/></td>
   <td><img src="http://ift.tt/1nQrO9e" alt="" width="220"/></td>
   <td><img src="http://ift.tt/1nQrO9e" alt="" width="220"/></td>
   <td><img src="http://ift.tt/1nQrO9e" alt="" width="220"/></td>
        </tr>
<tr>
   <td><h3>This meals's nutrition</h></td>
   <td><h3>2 meal description</h></td>
   <td><h3>3 meal description</h></td>
   <td><h3>4 meal description</h></td>
       </tr>
          </table>

at the beggining i had also <div class="container" id="bigmeals">
 so my table had an ID


some CSS I used were

.table th, .table td {
        text-align: right;
}
.table-bordered {  
    text-align: right;
}
#bigmeals .table table-bordered {  
    text-align: right;
}

#bigmeals .table .table-bordered {  
    text-align: right;
} 
#container {  
    text-align: right;
}

for borders i have used this

table td {
    border-top: none;
}

.table th, .table td { 
     border-top: none; 
 }

#bigmeals .table-bordered { 
     border-top: none; 
 }