making tbody display as block alters appearance of thead

Question

I started with this table:
_{(source: jimslounge.com)}

In order to make the tbody section scrollable I assigned it's display to block which stretches the first element of the thead row to the width of the tbody block.
_{(source: jimslounge.com)}

I can deal with this by simply spanning all the columns in the and rows but if there's a better way I'd like to see it. Here's my markup:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
    <style type="text/css">
      body {margin: 0; padding: 0;}
        table { width:100%; height: 550px; border: 1px solid black;}
        thead, tfoot { width: 100%; background-color: #eee;}
      tbody {**display: block;** height: 320px; width: 100%; overflow-y: scroll;}
      tbody tr:nth-of-type(odd) { background-color:#cfc; }
      tbody tr:nth-of-type(even) { background-color:#fcc; }
        th, td {padding: 0.5em; border: 1px solid black;}
        tfoot h1 {text-align: center;}
    </style>
</head>
<body>
<table>
  <thead>
        <tr><th><img src="mrRat.png"> </th><th colspan="4" id="title"><h1>A Table Displaying Data</h1></th><th> </th></tr>
    </thead>
    <tbody>
        <tr>
            <td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
            <td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
            <td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
            <td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
            <td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
            <td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
        </tr> 

<!-- most rows removed for sake of clarity -->

        <tr>
            <td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
            <td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
            <td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
            <td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
            <td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
            <td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
        </tr> 
    </tbody>
    <tfoot>
        <tr><td colspan="6"><h1>the footer</h1></td></tr>
    </tfoot>
</table>
</body>
</html>

Have you looked at this? http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody — Mathias, Mar 23 '14 at 18:18

score 1 · Accepted Answer · answered Mar 23 '14 at 18:22

1

You could put everything (mr Rat and the headline) into one th that spans all columns and use CSS to lay out the header like you want it. For example:

<thead>
  <tr><th colspan="6"><img id="mrrat" src="mrRat.png"/><h1 id="title">A Table Displaying Data</h1></th></tr>
</thead>

CSS:

#mrrat {
  float: left;
  width: 100px;
  height: 60px;
  margin: 20px;
}

Adjust to fit your needs.

answered Mar 23 '14 at 18:22

fiskeben

3,395
4
31
35

This is what I thought I would end up doing, I was pretty certain it was the best I could do. Thanks! – jimeast Mar 23 '14 at 20:22

making tbody display as block alters appearance of thead

1 Answers1