1

我建立了一个利用标题元素的表格；桌子周围有盒子阴影，默认情况下，标题放在桌子顶部，盒子阴影之外。我试图让标题落在盒子阴影内。我将标题的显示更改为display:table-header-group，它确实将其放置在表格内，但是“破坏”了我想要的布局......你可以在这里看到它：http: //jsfiddle.net/jalbertbowdenii/YraVE/ （我只看过这在 chrome 中）第一列比其他列占用更多的宽度。有人知道将标题放在表格中同时不改变列宽的解决方案吗？

CSS：

table{border-collapse:collapse; border-spacing:0; padding-top:0.5em; padding-bottom:0.5em; margin:0.8em auto; -moz-box-shadow:0 0 4px #000; -ms-box-shadow:0 0 4px #000; -o-box-shadow:0 0 4px #000; -webkit-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000; color:#000; width:80%}
.captionx{display:table-header-group}

HTML：

<h1>Caption Default <code>display:table-caption</code></h1>      
<table summary="Summary of Table Data">
        <caption>Caption for Table</caption>
        <thead><tr><th>Sun</th><th>Mon</th><th>Tues</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead>
        <tfoot><tr><td colspan="7"><p>Table Footer</p></td></tr></tfoot>    
        <tbody>
          <tr><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td></tr>        
        </tbody>
      </table>
<hr />
<h1>Caption set to <code>display:</code></h1>
      <table summary="Summary of Table Data">
        <caption class="captionx">Caption for Table</caption>
        <thead><tr><th>Sun</th><th>Mon</th><th>Tues</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead>
        <tfoot><tr><td colspan="7"><p>Table Footer</p></td></tr></tfoot>    
        <tbody>
          <tr><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td></tr>        
        </tbody>
      </table>
4

1 回答 1

2

我刚刚遇到了同样的问题并得到了这个问题。如果您确定您的标题将只有一行（即您知道它的高度），您可以尝试将其设置为position:absolute并且tabletoposition:relative与.padding-top的高度相等caption。

table {
    position: relative;
    padding-top: 20px;
}

caption {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    line-height: 20px;
}
于 2012-04-25T09:28:10.277 回答