Bootstrap Table Not Following Width With Display: Block

I'm actually running into a trouble since yesterday. I'm using Bootstrap 4, and tables. Actually, if I put a width over 13.5vw, the table don't follow. Here's the fiddle https://j

Solution 1:

Try my table code,

.viewTable {
        table-layout:fixed;
        margin:auto;
    }
    .thData, .tdData {
        padding:8px;
    text-align: center;
    }
    .theadData, tfoot {
    background-color: #9ac9fb;
        display:table;
        width:100%;
    }
    .table-height.table.tdData {
    vertical-align: middle !important; 
    }
    .viewTable.tbodyData {
        max-height:250px;
        overflow:auto;
        overflow-x:hidden;
        display:block;
    width:100%;
    }
    .item-dist.tbodyData {
        height:490px;
        overflow:auto;
        overflow-x:hidden;
    width:100%;
    }



    .tbodyData.trData {
        display:table;
        width:100%;
        table-layout:fixed;
        border-bottom: 1px solid #ffffff!important;
    }
    .table.theadData.thData {
    border: none !important;
    width: 10%!important;
        text-align: center;
    padding: 10px;
    }

<tablealign="center"class="table table-hover viewTable"><theadclass="theadData"><trclass="trData"><thclass="thData">Column 1</th><thclass="thData">Column 2</th><thclass="thData">Column 3</th><thclass="thData">Column 4</th></tr></thead><tbodyclass="tbodyData"><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr><trclass="trData"><tdclass="tdData">A</td><tdclass="tdData">B</td><tdclass="tdData">C</td><tdclass="tdData">D</td></tr></tbody></table>