CODEWITHSUNDEEP
htmlhtml-tablecaption
albert
albert

Reputation: 8153

Getting caption element inline with table element

I built a table that utilizes the caption element; there's box-shadows around the table, and by default the caption is placed atop the table, outside of the box-shadows. I am trying to get the caption to fall inside the box-shadows. I changed the caption's display to display:table-header-group, which does place it inside the table, however that "broke" the layout I desire....you can see it here: http://jsfiddle.net/jalbertbowdenii/YraVE/ (I only viewed this in chrome) the first column takes up much more width than the other columns. Anybody know of a solution that will place the caption within the table while at the same time not shift column width?

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>

Upvotes: 1

Views: 1970

Answers (1)

iv.draganov
iv.draganov

Reputation: 101

I just ran into the same issue and got to this question. If you are sure that your caption will be only one line (i.e. you know it's height) you can try setting it to position:absolute and the table to position:relative with a padding-top equal to the height of the caption.

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

caption {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    line-height: 20px;
}

Upvotes: 2

Related Questions