CODEWITHSUNDEEP
htmlcsshtml-table
Michael Farah
Michael Farah

Reputation: 421

Styling table rows as headings

I'm working on a mobile site targeting older phones that have limited CSS \ html support and so I'm reverting to tables.

What I'm trying to achieve on a particular page is to have a table row with a heading of a particular value and then another row in the same table with the value and a link to edit

The problem is that the heading spans only one column and I would like to be able to style it so that there is some padding and margins as well as a border.

Can someone provide some advice on how to do this?

HTML

<div class="navalt">
    <table style="width:100%;">
        <tbody>
        <tr class="edHeading">
            <td><fmt:message key="editprofile.location"/></fmt:message></td>
        </tr>
        <tr>
            <td class="leftTd">USA</td>
            <td class="rightTd"><a href="">Edit</a></td>
        </tr>

CSS

.navalt {
    text-align:center;
    padding: 4px 0px 4px 4px;
    border-top: thin solid #C5C9D1;
    border- bottom: thin solid #C5C9D1;
}
.edHeading {
    padding: 4px 0px 4px 4px;
    background-color:#E9E1FF;
}
.leftTd {
    border-right: thin solid #C5C9D1;
    padding: 0px 0px 0px 5px;
    text-align:left;
    width:50%;
}
.rightTd {
    padding: 0px 5px 0px 0px;
    text-align:right;
    width:50%;
}

Upvotes: 0

Views: 155

Answers (2)

Darren Wainwright
Darren Wainwright

Reputation: 30727

As Wabs said, you could just add a colspan to your td in the heading.

Another way, which will allow you to separate your styling more, is to use the thead tag - seeing as you have used <tbody> this would make more sense.

Also - as a side note, you have no closing tags for your div and body and table - though i assume this is because you only copied part of your code..?

Here is a fiddle: http://jsfiddle.net/f6NKt/2/

the code is as:

HTML

<table style="width:100%;">
 <thead>
    <tr>
    <th colspan="2">Heading - location use th tags</th>
   </tr>
 </thead>
 <tbody>
<tr>
    <td class="leftTd">USA</td>
    <td class="rightTd"><a href="">Edit</a></td>
    </tr>
</tbody>
 </table>

and CSS - notice use of thead instead

.navalt {text-align:center;padding: 4px 0px 4px 4px;border-top: thin solid #C5C9D1;border- bottom: thin solid #C5C9D1;}

thead {padding: 4px 0px 4px 4px;background-color:#E9E1FF;}
thead th {font-size:20px;}

.leftTd {border-right: thin solid #C5C9D1;padding: 0px 0px 0px 5px;text-align:left;width:50%;}

.rightTd {padding: 0px 5px 0px 0px;text-align:right;width:50%;}

Upvotes: 1

RobF
RobF

Reputation: 2818

Unless I'm missing something, could you not add colspan=2 to the header <td> so it spans your entire table?

<tr class="edHeading"><td colspan="2"><fmt:message key="editprofile.location"/></td></tr>

Upvotes: 0

Related Questions