Exceeding width problem, even with wrapper div.

rdsdatatables

Hi.

I'm starting to use DataTables, and I'm finding it wonderful. I know this has probably been asked here previously, but I believe my case may be different. I am using DataTables with the following configuration (JavaScript):

var tabeladt = $('#tab-teste-dt').DataTable(
{
    // "paging" : true,
    "pagingType": "simple_numbers",
    // "lengthChange": false,
        // "ordering" : true,
        // "searching" : false,
        // "info" : true, 
    "serverSide" : true,
        "processing": true,
        "ajax" : 
        {
            "url" : "lista-ajax",
        "type" : "POST",
        "dataType" : "json",
        "contentType" : "application/json; charset=utf-8",
        "async" : true,
        "cache" : false,
        "processData" : false,
        "data": function ( d ) 
        {
            return JSON.stringify( d );
        }
        },

        "columns" : [
                     {} , 
                     {} ,
                     {} ,
                     // Coluna 4...
                     { "render" : function(data , type , row , meta)
                         {
                            if(data.substr(0, 1) == "H")
                            {
                                return '<img src="/app/imagens/ico-h.png" />';
                            }
                            else if(data.substr(0,1) == "M")
                            {
                                return '<img src="/app/imagens/ico-m.png" />';
                            }
                            else
                            {
                                return data;
                            }
                         } } ,
                     {} ],

        "dom" : 'rt<"nav-dt"pl>',
        
        "language" : {
            "decimal":        ",",
            "emptyTable":     "Sem dados disponíveis no momento.",
            "info":           "Showing _START_ to _END_ of _TOTAL_ entries",
            "infoEmpty":      "Showing 0 to 0 of 0 entries",
            "infoFiltered":   "(filtered from _MAX_ total entries)",
            "infoPostFix":    "",
            "thousands":      ".",
            "lengthMenu":     "ITENS POR PÁGINA: _MENU_",
            "loadingRecords": "Carregando...",
            "processing":     "Processando...",
            "search":         "PESQUSIAR:",
            "zeroRecords":    "Nenhum registro foi encontrado.",
            "paginate": {
                "first":      "INÍCIO",
                "last":       "FIM",
                "next":       "SEGUINTE",
                "previous":   "ANTERIOR"
            },
            "aria": {
                "sortAscending":  ": activate to sort column ascending",
                "sortDescending": ": activate to sort column descending"
            }
        },
                     
        // Extensão select!
        "select" : 
        {
            'style': 'single'
        }
});

Here is my HTML markup:

<div class="conte-tabela" th:fragment="tabela-teste (titulo)">
        
    <!-- HEADER -->
    <div id="cabecalho">
            
        <!-- TITLE -->
        <span id="titulo" th:text="${titulo}">Título de tabela</span>
                
        <!-- OPTIONS BUTTONS -->
        <span id="opcoes">
            <button id="bot-pesquisa"></button><button id="bot-colunas"></button>
        </span>
        
        <!-- COLUMNS MENU -->
        <ul id="menu-colunas" class="popup-menu">
            <li th:each="col : ${#numbers.sequence(0 , colunas.length - 1)}">
                <label>
                    <input type="checkbox" th:value="${col}" th:text="${colunas[col]}" checked="checked">
                </label>
            </li>
        </ul>
        
        <!-- SEARCH MENU -->
        <div id="menu-pesquisa" class="popup-menu">
            <input type="text" placeholder="pesquisar por..."/>
        </div>
                
    </div>
            
    <!-- TABLE -->
    <table id="tab-teste-dt" class="stripe cell-border">
        <thead>
            <tr>    
                <th th:each="coluna : ${colunas}" 
                    th:text="${coluna}">
                    nome de coluna.
                </th>
            </tr>
        </thead>
    </table>
            
</div>

Note: There are some special elements from Thymeleaf (I'm a Java developer).

My CSS file:

.conte-tabela 
{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.conte-tabela #cabecalho 
{
    background: #474241;
    border-left: 1px solid #312e2d;
    border-right: 1px solid #312e2d;
    border-top: 1px solid #312e2d;
    
    width: 100%;
    display: table;
    
    padding: 14px 38px;
    box-sizing: border-box;
    position: relative;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.conte-tabela #cabecalho #titulo 
{
    text-transform: uppercase;
    font-size: 10pt;
    font-weight: bold;
    color: white;
    
    display: table-cell;
    vertical-align: middle;
}

.conte-tabela #cabecalho #opcoes 
{
    float: right;
    display: inline-block;
}

.conte-tabela #cabecalho #opcoes button 
{
    background-color: #474241;
    border: 1px solid #312e2d;
    box-sizing: border-box;
    color: white; width : 40px;
    height: 40px;
    margin-left: 10px;
    width: 40px;
    
    background-repeat: no-repeat;
    background-position: center center;
}

.conte-tabela #cabecalho #opcoes #bot-pesquisa
{
    background-image: url("/app/imagens/ico-pesquisa.png");
}

.conte-tabela #cabecalho #opcoes #bot-colunas
{
    background-image: url("/app/imagens/ico-conf.png");
}

.conte-tabela #cabecalho #opcoes button:ACTIVE 
{
    background-color: #312e2d;
}

.conte-tabela #cabecalho #menu-colunas
{
    margin: 0;
    padding: 20px;
    position: absolute;
    
    top: 100%;
    right: 38px;
    
    border: 1px solid #312e2d;
    background: #474241;
    
    z-index: 100;
    list-style: none;
    
    opacity: 0.9;
    display: none;
}

.conte-tabela #cabecalho #menu-colunas li
{
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}

.conte-tabela #cabecalho #menu-colunas input[type="checkbox"]
{
    margin-right: 10px;
}

.conte-tabela #cabecalho #menu-pesquisa
{
    margin: 0;
    padding: 20px;
    position: absolute;
    
    top: 100%;
    right: 38px;
    
    border: 1px solid #312e2d;
    background: #474241;
    
    display: none;
    z-index: 100;
    opacity: 0.9;
}

Now, take a look at the attached image, please. See how the table exceeds the imposed width limits. If I uncheck the CSS stylization of "element", it get the right size. How can I fix this?

I am also using a separate CSS file to stylize the table in my way. In the case, I generated a theme for styling, and I'm using it as a style for my table. I copied the code and pasted it into a new file (CSS). This gave me full control over stylization, and created a locale for it. I'm saying this, because I do not know if what I did was correct. Since the DataTables styling file is kinda fat/big, I omitted it here. If it is necessary, I will put it here.

Thanks in advance.

rdsdatatables

Looks like I finally found the solution:

"autoWidth" : false

Thanks anyway.

wan1402

thanks a lot, this "autoWidth" : false works for me
i've been searching for some times.