Can't style a td element

I'm not sure why, but i can't seem to style a td element in my script. I'm trying to remove a border from all the td elements in the table-subtitles, and i guess my css is wrong somehow.

PS: I was able to remove the border by inline css only.

HTML:

<table> 
    <thead> 
        <tr>
            <th width="100%" colspan="5">My Recent Activity</th>
        </tr> 
    </thead> 
    <tbody> 
        <tr class="table-subtitles">
          <td style="border: 0"><h4>Date</h4></td>
          <td><h4>Description</h4></td>
          <td><h4>Amount</h4></td>
          <td><h4>Due</h4></td>
          <td><h4>Status</h4></td>
        </tr>
        <?php foreach($this->payments as $payment): ?>
        <tr>
        </tr>
       <?php endforeach; ?>        
        <?php 
            if ((count($this->payments)==0)) :
        ?>      
          <tr>
            <td style="border: 0; text-align: center" colspan="6" class="info">N开发者_如何转开发o payments made yet</td>
          </tr>
       <?php endif; ?>    
    </tbody>
</table>

CSS:

#payments-content { width: 480px; float: left; margin-right: 20px; }
#payments-sidebar { width: 270px; float: left; }

.ui-button-large .ui-button-large-text { font-size: 20px; width: 270px; }

// new tables design
.table-subtitles td{ border-bottom: 0 !important; }

// is not a css comment. you must use /* */

You might find want to make friends with border-collapse and th.

When I put just this table into a test HTML file I'm getting no borders by default. Therefore this is probably an inheritance issue with some previous table styling you have or are importing from your CSS. Normally, the solution to such problems is over riding whatever style its inheriting my making a more specific selector in CSS. So for example, give your table an ID and have your CSS style be:

#mytable .table-subtitles td { border-bottom: 0; }

Another great way to see exactly what's happening is to use Firebug in Firefox or the Chrome inspector see exactly what styles your table rows are picking up, inheriting or being overridden.

did you try border-bottom:0!important

Your problem is with your selector.

Doing .table-subtitles td means: The TD element inside the element with the "table-subtitles" class. What you need is:

td.table-subtitles { border-bottom:0; }