CODEWITHSUNDEEP
htmlcss
Filip Machaj
Filip Machaj

Reputation: 45

Table columns displayed evenly with the table header

My table header displays unevenly with the table's rows.

Like on this picture:

enter image description here

Sorry, the names on the picture are in my native language (Polish), but I hope you get the idea.

How could I make the header and rows display evenly with the rest of the table?

Below I'm posting my HTML along with my CSS for this table:

CSS:

.hid{
    display: none;
    overflow:hidden;
    visibility: hidden;
}
.kol{
    width: 100%;
    display: inline;
    padding: 20px;
    text-align: justify;

    border-style: solid;
    border: deepskyblue;
}
.nagl{

    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #167F92;



}
.row{
   /* display: table-row;*/
    display:table;
    table-layout: fixed;
    width:100%;
}
td:empty { display: none; }

And my HTML for the tables header:

<div class="nagl" id="nago">
<table class="row">
    <tr >

        <th  class=' kol'>id</th>
        <th  class=' kol '>pesel</th>
        <th  class=' kol'>numer dowodu</th>
        <th  class=' kol'>imie</th>
        <th class=' kol'>nazwisko</th>
        <th  class=' kol'>data urodzenia</th>
        <th  class=' kol'>adres</th>


    </tr>
</table>

And for the table itself:

  <table>
   <tr class='row'>
       <th  class=' hid '><input   type='radio' name='rad' value='nie_wybrany' onclick='wyb_rekord() '></th>
       <td   class='  kol'>{{id}}</td>
       <td  class='  kol'>{{pesel}}</td>
       <td   class='  kol'>{{nr_dowodu}}</td>
       <td   class='  kol'>{{imie}}</td> 
       <td  class='  kol'>{{nazwisko}}</td>
       <td  class='   kol'>{{formatDate data_urodzenia  'short'}}</td>
       <td   class='  kol'>{{adres}} </td>


   </tr>
 </table>

I'm populating the table dynamically using javascript and handlebars

Upvotes: 0

Views: 53

Answers (2)

Filip Machaj
Filip Machaj

Reputation: 45

I have changed ths css class:

 .nagl{


    background-color: #167F92;
    top: 100px;
    position: fixed;
    padding: 20px;

   }

and I have added this block to my css:

th, td{
width: 12vw;
text-align: center;}

The effects are as follows: enter image description here

Upvotes: 0

Spandan
Spandan

Reputation: 259

Why do we need to have 2 separate tables for Header and the actual Data part of the table. We can easily achieve this by using in built tags.

<table>
  <thead>
    <tr>
      <th>Header1</th>
      <th>Header2</th>
      <th>Header3</th>
      <th>Header4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data1</td>
      <td>Data2</td>
      <td>Data3</td>
      <td>Data4</td>
    </tr>
    <tr>
      <td>Data11</td>
      <td>Data22</td>
      <td>Data33</td>
      <td>Data44</td>
    </tr>
    <tr>
      <td>Data111</td>
      <td>Data222</td>
      <td>Data333</td>
      <td>Data444</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions