DataTable responsive, child duplicate

On the client page I have a table that uses the DataTable plugin, but this table is bugging when it is mobile. Follow the table's HTML code:

<div class="dataTable_wrapper">
<table width="100%" class="table table-striped table-bordered table-hover" id="example">
    <thead>
        <tr>
            <th class="text-center">Nº do Pedido</th>
            <th class="text-center">Data</th>
            <th class="text-center">Total</th>
            <th class="text-center">Status</th>
            <th class="text-center">Ação</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">00000001</td>
            <td class="text-center">22/07/2017</td>
            <td class="text-center">R$149,50</td>
            <td class="text-center">Em transito</td>
            <td class="text-center"><a href="#" title="Visualizar pedido"><i class="fa fa-eye fa-2x"></i></a></td>
        </tr>
        <tr>
            <td class="text-center">00000001</td>
            <td class="text-center">22/07/2017</td>
            <td class="text-center">R$149,50</td>
            <td class="text-center">Em transito</td>
            <td class="text-center"><a href="#" title="Visualizar pedido"><i class="fa fa-eye fa-2x"></i></a></td>
        </tr>
        <tr>
            <td class="text-center">00000001</td>
            <td class="text-center">22/07/2017</td>
            <td class="text-center">R$149,50</td>
            <td class="text-center">Em transito</td>
            <td class="text-center"><a href="#" title="Visualizar pedido"><i class="fa fa-eye fa-2x"></i></a></td>
        </tr>
    </tbody>
</table>

Then the SCRIPTS and LINK's of DataTable :

<link rel="stylesheet" href="componentes/plugins/datatables/datatables.min.css">
<link rel="stylesheet" href="componentes/plugins/datatables/DataTables-1.10.15/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="componentes/plugins/datatables/Responsive-2.1.1/css/responsive.bootstrap.min.css">
<script type="text/javascript" src="componentes/js/jquery.min.js"></script>
<script src="componentes/plugins/datatables/datatables.min.js"></script>
<script src="componentes/plugins/datatables/Responsive-2.1.1/js/dataTables.responsive.min.js"></script>
<script>
$(document).ready(function() {
    $('#example').DataTable({
        responsive: true,
        "oLanguage": {
                "sProcessing":   "Processando...",
                "sLengthMenu":   "Mostrar _MENU_ registros",
                "sZeroRecords":  "Não foram encontrados resultados",
                "sInfo":         "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                "sInfoEmpty":    "Mostrando de 0 até 0 de 0 registros",
                "sInfoFiltered": "",
                "sInfoPostFix":  "",
                "sSearch":       "Buscar:",
                "sUrl":          "",
                "oPaginate": {
                    "sFirst":    "Primeiro",
                    "sPrevious": "Anterior",
                    "sNext":     "Seguinte",
                    "sLast":     "Último"
                }
            }
    });

} );
</script>

Next I show the bug, which is, when clicking on the '+' icon on mobile screens, the table opens but buga as in the image below:

How can I fix this? What is my error?