Prevent a table from moving its columns when a scrollbar appears

Question

Prevent a table from moving its columns when a scrollbar appears

Navigation

#1 by (0 votes)

0

In this image you can see that all the columns fit well but ...

When the scrollbar appears, the columns in the table below do not match the ones above.

If anyone knows how to avoid this, I would appreciate it very much.

HTML

    <TABLE border="1">
                    <TR>
                        <TH align="center" rowspan="2">Columna 1</TH>
                        <TH align="center" colspan="2">Columna 2,3</TH>
                        <TH align="center" colspan="2">Columna 4,5</TH>
                        <TH align="center" >Columna 6</TH>
                        <TH align="center" >Columna 7</TH>
                        <TH align="center" >Columna 8</TH>

                    </TR>
                        <TR>

                        <TH >Columna 2</TH>
                        <TH >Columna 3</TH>
                        <TH colspan="2">Columna 4,5</TH>
                        <TH >Columna 6</TH>
                        <TH >Columna 7</TH>
                        <TH >Columna 8</TH>                        
                        </TR>
</TABLE>
<div class="contiene_tabla">
<TABLE border="1">
    <TBODY>
        <TR>                
            <TD  align="center">Columna 1</TD> 
            <TD  align="center">Columna 2</TD> 
            <TD  align="center">Columna 3</TD> 
            <TD  align="center">Columna 4</TD> 
            <TD  align="center">Columna 5</TD>
            <TD  align="center">Columna 6</TD> 
            <TD  align="center">Columna 7</TD>
            <TD  align="center">Columna 8</TD> 
        </TR>
    </TBODY>
</TABLE>
</div>

CSS

div.contiene_tabla {
height: 208px; 
margin-right: 100px; 
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
}

table {
table-layout:fixed;
width: 98%;
}

th, td {
padding: 4px;
white-space: pre; 
/* CSS 2.0 */
white-space: pre-wrap; 
/* CSS 2.1 */
white-space: pre-line; 
/* CSS 3.0 */
white-space: -pre-wrap; 
/* Opera 4-6 */
white-space: -o-pre-wrap; 
/* Opera 7 */
white-space: -moz-pre-wrap; 
/* Mozilla */
white-space: -hp-pre-wrap; 
/* HP */
word-wrap: break-word;
/* IE 5+ */
}

javascript html css

asked by Luis Donaldo de la O Hidalgo 30.11.2017 в 20:47

source

1 answer

Mathematical calculations in real time through the onchange event in javascript Read any extension .txt file inside a specific folder in ruby every 2 minutes

score 0 · Accepted Answer

Good morning, I had not fully understood the question.

Perform the modification of the code, I continue creating a single table and in the css is where I specify the design of this, that is, place the static header. Greetings.

table{
    border-spacing: 0;
    display: flex;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
    table-layout: fixed;
    width: 98vw;
    border:1px solid gray;
}

thead{
    background-color: #f1eee9;
    position: fixed;
}

th{
    border-bottom: 1px solid #c4c0c9;
    border-right: 1px solid #c4c0c9;
}

th,td{
    font-weight: normal;
    margin: 0;
    max-width: 10.5vw;
    min-width: 10.5vw;
    word-wrap: break-word;
    font-size: 11px;
    height: 3.5vh !important;
    padding: 4px;
    border-right: 1px solid #c4c0c9;
}
tr:nth-child(2n) {
    background: none repeat scroll 0 0 #edebeb;
}

<table>
    <thead>
        <tr>
            <th align="center" rowspan="2">column1</th>
            <th align="center" colspan="2">column 2,3</th>
            <th align="center" colspan="2">column 4,5</th>
            <th align="center">column 6</th>
            <th align="center">column 7</th>
            <th align="center">column 8</th>
        </tr>
        <tr>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>
            <th>column 5</th>
            <th>column 6</th>
            <th>column 7</th>
            <th>column 8</th>
        </tr>
    </thead>
    <tbody>
        <!--Importante definir cuantas columnas tendra la tabla -->
        <tr >
            <td colspan="8"></td>
        </tr>
        <tr>
            <td colspan="8"></td>
        </tr>
        <tr>
            <td  align="center">Columna 1</td> 
            <td  align="center">Columna 2</td> 
            <td  align="center">Columna 3</td> 
            <td  align="center">Columna 4</td> 
            <td  align="center">Columna 5</td>
            <td  align="center">Columna 6</td> 
            <td  align="center">Columna 7</td>
            <td  align="center">Columna 8</td> 
        </tr>
        <tr>
            <td  align="center">Columna 1</td> 
            <td  align="center">Columna 2</td> 
            <td  align="center">Columna 3</td> 
            <td  align="center">Columna 4</td> 
            <td  align="center">Columna 5</td>
            <td  align="center">Columna 6</td> 
            <td  align="center">Columna 7</td>
            <td  align="center">Columna 8</td> 
        </tr>
        <tr>
            <td  align="center">Columna 1</td> 
            <td  align="center">Columna 2</td> 
            <td  align="center">Columna 3</td> 
            <td  align="center">Columna 4</td> 
            <td  align="center">Columna 5</td>
            <td  align="center">Columna 6</td> 
            <td  align="center">Columna 7</td>
            <td  align="center">Columna 8</td> 
        </tr>
    </tbody>
</table>