Header alignment

Header alignment

johnamosjohnamos Posts: 2Questions: 1Answers: 0

In the example on datatables.net the column headers do not align with the data in the table (http://imgur.com/fyo6XOB). I tried to change this with CSS but I can't get rid of that extra space. I searched this forum but I can't find anyone else complaining about it.

Answers

  • tangerinetangerine Posts: 3,355Questions: 37Answers: 394

    I tried to change this with CSS

    What did you do?

  • vishalashahvishalashah Posts: 3Questions: 2Answers: 0

    We observed a similar issue in our implementation when we were using fixed headers. After searching, filtering out changing Pages this issue is resolved.

    To solve our problem we updated the header table width equal to the main datatable width in initComplete.

  • johnamosjohnamos Posts: 2Questions: 1Answers: 0

    I fixed this with the following CSS:

    table.dataTable thead th,
    table.dataTable tfoot th {
      text-align: left;
    }
    table.dataTable thead th,
    table.dataTable thead td {
      padding: 10px 18px 10px 5px;
      border-right: 1px solid #dddddd;
    }
    table.dataTable tbody th,
    table.dataTable tbody td {
      padding: 10px 18px 10px 5px;
      border-right: 1px solid #dddddd;
    }
    

    Notice the padding on the left (5px) and right (18px) are the same for header and body so that they will align. The 18px padding on the right is required to accommodate the triangular sort indicators. This CSS also adds borders to separate the columns. The result looks better:
    http://i.imgur.com/Foow4BF.png

This discussion has been closed.