I am currently developing a mobile website that is specifically designed for older phones with minimal CSS and HTML support. Due to these limitations, I have decided to utilize tables in my design.
My goal on a certain page is to create a table row with a heading displaying a specific value, followed by another row in the same table that includes the value along with a link to edit it.
The issue I am facing is that the heading only spans one column, but I would like to style it with padding, margins, and a border.
Could someone offer some guidance on how to achieve 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%;
}