We help IT Professionals succeed at work.

styling a table

merijn van der leek
merijn van der leek asked
on
Hey i have this table in html which is scrollable vertically. This works but there is an issue the headers do not allign with the text in the table. Does anyone know how i can fix this?
this is the code:
table {
  display: inline-grid;
  grid-template-areas:
  "scrollable";
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


tbody {
  overflow: auto;
  height: 400px; /* define height depending on your needs */
  width: 100%;
}

Open in new window


And the table is:
   <table>
        <thead>
            <th>Username</th>
            <th>Result</th>
            <th>Quiz name</th>
            <th>Category</th>
            <th>Date</th>
        </thead>
        <tbody>
            {% for res in result_sql %}
            <tr>
                <td>{{res.username}}</td>
                <td>{{res.result}}</td>
                <td>{{res.quiz_name}}</td>
                <td>{{res.category}}</td>
                <td>{{res.date}}</td>
            </tr>
            {% endfor %}

        </tbody>


    </table>

Open in new window


I will also attach a photo of the table if anyone could help that would be great!
table.PNG
Comment
Watch Question

Dr. KlahnPrincipal Software Engineer

Commented:
Replace
        <thead>
            <th>Username</th>
            <th>Result</th>
            <th>Quiz name</th>
            <th>Category</th>
            <th>Date</th>
        </thead>
        <tbody>

Open in new window

with
<TR>
<td>Username</td>
<td>Result</td>
<td>Quiz name</td>
<td>Category</td>
<td>Date</td>
</TR>

Open in new window

and delete the trailing <tbody>.
leakim971Multitechnician
Top Expert 2014

Commented:
test page : https://jsfiddle.net/jv7ehrg2/

table {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 550px;
}

tbody {
    height: 400px;
    overflow-y: auto;
}

tbody, thead {
  display: block;
  width: 100%;  
} 
td, th {
    width: 100px;
    text-align: center;
}

Open in new window

Hi,

I recommand you to use Datatables https://datatables.net/
This have everything ready, this come with several widgets and you can use it with Bootstrap to have a nice looking.

Author

Commented:
Thanks for the help i will try it out!