Overflow table body: scroll misaligned relative to the header (HTML / CSS)

Navigation
1

I'm having an alignment problem in a table where I needed to apply a scrollbar on the body, leaving the header fixed. It occurs that the cells of the body are misaligned in relation to those of the heading. Manipulating thead width did not achieve precise result. I inserted the border just to make it easier to see the problem.

Followthecode:

<html><head><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
        <style type="text/css">
            #listIcv thead {
                width: 98%;
                background-color: #DCDCDC;
            }
            #listIcv tbody {
                height: 150px;
                overflow-y: auto;
                width: 100%;
            }
            #listIcv thead, #listIcv tbody, #listIcv tr, #listIcv td, #listIcv th {
                display: block;
            }
            #listIcv tbody td, #listIcv thead > tr > th {
                float: left;
            }
        </style>
    </head>
    <body>
        <table class="table table-striped table-hover" id="listIcv">
            <thead>
                <tr>
                    <th class="col-xs-4">Atributo 1</th><th class="col-xs-2">Atributo 2</th><th class="col-xs-2">Atributo 3</th><th class="col-xs-2">Atributo 4</th><th class="col-xs-1">A</th><th class="col-xs-1">B</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
    
asked by anonymous 11.12.2017 / 12:26

2 answers

0

As Guilherme said, there is no perfect world in this case, because every brwoser defaults to his specific scroll bar. But you can try to soften it with some techniques.

One option is to discount the width of the bar scroll bar of the tbody's width . Like this: 

#listIcv tbody {
    height: 150px;
    overflow-y: auto;
    width: calc(100% - 9px); /* desconta a largura do scroll-bar */
}

Another technique is to use a scroll bar for jQuery, you and sconde the default browser scroll and use one built by jQuery .

Follow the link for the project: link

Demo: link

    
11.12.2017 / 13:22
0

It is impossible to hit / fix this, every operating system or browser will have a scrollbar type, the width will never be what is wanted

Another problem in your code is that you are applying col- which are classes for responsive elements in THs and TDs, this will at least break the table one way or another, I will not give you a magic solution, the what I'm going to do is recommend that you use media-query ( @media ) to hide columns that you do not want or that you use overflow-x: auto; in the table directly, to apply a horizontal scroll when necessary, this can be done in bootstrap with table-responsive 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<table class="table table-bordered table-responsive">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
    
11.12.2017 / 12:37
How to put active class in navbar Input and Output - Definition