5

I have an HTML structure from an legacy app I have to style like our new app. For this I need to add margin only for the tbody. So setting padding in table won't work because the header should be as wide as the table.

Here's a little sketch what it should look like: enter image description here

Why do I need that? I have to put two tables side by side and it should look like as there is only one header but two content tables.

I played around with padding and borders of the thead element but the problem is that the thead has a bottom border which isn't applied to the right border.

Edit:/ The picture is about what I want. The two tables are mentioned because that's the reason I want one table to look like that.

Solutions are welcome if they style the table like I showed in the picture or style two tables with two different tbodys and theads like they would have one thead.

What I need are still correct labels for the columns in tbody but the left and the right column should be a little bit wider to stretch it to the whole table.

Edit:/ Because there was some confusion what I meant here is a screenshot of the style I want to accomplish without altering the DOM structure with JS: enter image description here

4

2 回答 2

3

轻松设置display:table并tbody使用自定义宽度。

完整演示

HTML：

<table>
    <thead>
        <tr><td>Head1</td></tr>
        <tr><td>Head2</td></tr>
    </thead>
    <tbody>
        <tr><td>Body1</td></tr>
        <tr><td>Body2</td></tr>
        <tr><td>Body3</td></tr>
        <tr><td>Body4</td></tr>
    </tbody>
</table>

CSS：

table{
    width: 500px;
background: #808080;
}
thead{
    width: 100%;
text-align: center;
background: #FF6347;
}
tbody{
    display: table;
width: 400px;
margin: 0 auto;
text-align: center;
background: #FFF;
}
于 2013-11-05T15:36:42.190 回答
0

您的日历实际上是两个子表（包括带有日期名称的标题）。从这个角度来看，在外部表上使用两个带有填充的单元格会给你想要的效果

于 2013-11-05T15:32:38.807 回答