将表格行样式化为标题

Question

我正在开发一个针对旧手机的移动网站，这些手机对 CSS \ html 的支持有限，因此我正在恢复使用表格。

我要在特定页面上实现的目标是在表中创建一个带有特定值标题的行，然后在同一个表中创建另一行，其中包含该值和一个编辑链接

问题是标题只跨越一列，我希望能够对其进行样式设置，以便有一些填充和边距以及边框。

有人可以就如何做到这一点提供一些建议吗？

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%;
}

Answer 1

正如 Wabs 所说，您可以在标题中为您的 td 添加一个 colspan。

另一种可以让您更多地分离样式的方法是使用 thead 标签 - 看到您使用了 <tbody> 这会更有意义。

另外 - 作为旁注，你的 div 和 body 和 table 没有结束标签 - 虽然我认为这是因为你只复制了部分代码..？

这是一个小提琴：http://jsfiddle.net/f6NKt/2/

代码如下：

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>

和 CSS - 注意使用 thead 代替

.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%;}

Answer 2

除非我遗漏了一些东西，否则你能不能将 colspan=2 添加到标题 <td> 以便它跨越整个表格？

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