Unable to get DataTables header row to line up when using `scrollY`

Unable to get DataTables header row to line up when using `scrollY`

imthenachomanimthenachoman Posts: 4Questions: 2Answers: 0

DataTable header is not lining up when using scrollY. I'm not sure why it doing this.

https://codepen.io/imthenachoman/pen/bGryxga

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Some of the custom CSS is causing problems. For example:

    th + th + th {
        width: 100%;
    }
    

    which would mean the third column takes 100% width, which doesn't quite make sense, is triggering our right-to-left layout, which is interesting in itself.

    With stripped back CSS it works okay: https://codepen.io/imthenachoman/pen/bGryxga

    Allan

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Sorry - I forgot CodePen doesn't save automatically. This is the modified CSS that works:

    table,
    th,
    td {
        border: 1px solid black;
    }
    
    textarea {
        width: 95%;
        height: 100px;
        background-color: #ffdddd;
    }
    
    input[type="button"],
    input[type="submit"] {
        background-color: #ddddff;
    }
    

    Allan

  • imthenachomanimthenachoman Posts: 4Questions: 2Answers: 0

    Ah. Got it. Thank you!

Sign In or Register to comment.