数据表列宽答案

【问题标题】：Datatable columns width数据表列宽
【发布时间】：2016-04-19 16:53:54
【问题描述】：

我已经设置了一个包含多行和多列的数据表，并且想知道如何使“电话 1、电话 2 和 Fecha”列更宽一些，以便文本显示在一行中。我已经尝试在数据表 js 上更改 s 宽度和 columnsdef 属性，但它不起作用。

    <html>

<head>

    <!DOCTYPE html>

    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
    <link rel="icon" href="./resources/logo.jpg">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">




<script>


    $(document).ready(function() {


        var oTable = $('#maintable').dataTable( {

            "aoColumnDefs": [
                { "bSortable": false, "aTargets": [ 0 ] }
            ],
            "aaSorting": [[1, 'asc']],
            "scrollY": 500,
            "scrollX": true,
            "bAutoWidth": false,
            "aoColumns" : [
                { sWidth: '10px' },
                { sWidth: '100px' },
                { sWidth: '120px' },
                { sWidth: '30px' },
                { sWidth: '120px' },
                { sWidth: '120px' },
                { sWidth: '120px' },
                { sWidth: '120px' },
                { sWidth: '120px' },
                { sWidth: '120px' },
                { sWidth: '120px' },
                { sWidth: '120px' },
                { sWidth: '120px' },
                { sWidth: '120px' },
                { sWidth: '120px' },
                { sWidth: '120px' }
            ],  



            "language": {
                "lengthMenu": "Mostrar _MENU_ datos por pagina.",
                "zeroRecords": "Nada fue encontrado.",
                "info": "Mostrando _PAGE_ de _PAGES_",
                "infoEmpty": "No hay datos disponibles",
                "infoFiltered": "(filtrado de _MAX_ datos totales)",
                "search": "Buscar:",
                "paginate": {
                    "first":      "Primero",
                    "last":       "Ultimo",
                    "next":       "Proximo",
                    "previous":   "Previo"
                }
            }


        });



    } );


</script>   




    <title>Consulta de facturas atrasadas</title>

    <style type="text/css">
        html, #page { padding:0; margin:0;}
        body { margin:0; padding:0; width:100%; color:#959595; font:normal 12px/2.0em Sans-Serif;} 
        h1, h2, h3, h4, h5, h6 {color:darkblue; text-align: center;}

        #page { background:#fff;}
        #header, #footer{ margin:0; padding:0;}


        #logo { padding:0; width:auto; text-align: center; margin: auto;}

        #header { background:#fff; }
        #header-inner { margin:0 auto; padding:0;}


        #footerblurb { background:#d3d3f9;color:blue; width: 100%;}     

        #footer { background:#fff; width: 100%;}
        #footer-inner { margin:auto; text-align:center; padding:12px;}
        #footer a {color:blue;text-decoration:none;}

        #maintable {

            text-align: center;             
            overflow: auto;
        }

        #events {
            margin-bottom: 1em;
            padding: 1em;
            background-color: #f6f6f6;
            border: 1px solid #999;
            border-radius: 3px;
            height: 100px;
            overflow: auto;
        }

        td.highlight {
            background-color: whitesmoke !important;
        }


        #container {

            width:90%;
            margin: 0 auto;

        }

        #titulo {

            margin: 0 auto;

        }


        div.slider {
            display: none;
        }

        table.dataTable tbody td.no-padding {
            padding: 0;
        }


        .bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }




        .clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}

    </style>

</head>

<body>

        <br>
    <div id="page">
        <header id="header">
            <div id="header-inner"> 
                <div id="logo">

                </div>

                <div id="titulo">

                </div>

                <div class="clr"></div>
            </div>
        </header>
        <br>    

    <div id="container">

        <table id="maintable" class="row-border hover order-column display" cellspacing="0" width="100%">
            <thead>
                <tr style="text-align: center; color: black">

                    <th>Codigo</th>
                    <th>Nombre</th>
                    <th>Propietario</th>
                    <th>Direccion</th>
                    <th>Ciudad</th>
                    <th>Sector</th>
                    <th>Cedula</th>
                    <th>Tel. 1</th>
                    <th>Tel. 2</th>
                    <th>Celular</th>
                    <th>Factura</th> 
                    <th>Fecha</th> 
                    <th>Dias</th> 
                    <th>Monto</th> 
                    <th>Pendiente</th> 
                    <th>Vendedor</th> 

                </tr>
            </thead>


            <tbody>

                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOSE HERNANDEZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2016-4-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>
                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOAN MANUEL RAMIREZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2015-12-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>
                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOAN MANUEL RAMIREZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2015-12-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>
                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOSE HERNANDEZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2016-4-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>
                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOAN MANUEL RAMIREZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2015-12-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>
                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOSE HERNANDEZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2016-4-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>
                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOAN MANUEL RAMIREZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2015-12-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>
                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOAN MANUEL RAMIREZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2015-12-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>
                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOAN MANUEL RAMIREZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2015-12-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>
                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOSE HERNANDEZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2016-4-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>
                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOAN MANUEL RAMIREZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2015-12-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>
                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOAN MANUEL RAMIREZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2015-12-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>
                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOSE HERNANDEZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2016-4-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>
                <tr>

                    <TD>02SA023</TD>      
                    <TD>MOTO REPUESTOS A Y J</TD>                                 
                    <TD>JOAN MANUEL RAMIREZ</TD>              
                    <TD>C/JOSE TAPIA BREA ANT.18 #249 ENS. QUISQUEYA</TD>         
                    <TD>SANTO DOMINGO</TD>                    
                    <TD>ENSANCHE QUISQUEYA</TD>               
                    <TD>00114957335</TD>                      
                    <TD>829-433-5307</TD>      
                    <TD>829-305-0426</TD>      
                    <TD>7195918</TD>
                    <TD>1718</TD>          
                    <TD>2015-12-18</TD>   
                    <TD>104</TD>                        
                    <TD>9980.00</TD>        
                    <TD>9980.00</TD>        
                    <TD>Joan Ramirez</TD>   

                </tr>

            </tbody>

        </div>    


        </table>    

    </div>                                                                      

    <div class="clr"></div>




</body>

【问题讨论】：

尝试开始防止换行 -> stackoverflow.com/questions/30535609/…

标签： javascript html css datatables

【解决方案1】：

尝试将 table-layout 更改为 fixed，只需添加此 CSS：

table.display {
    table-layout: fixed;          
}

现在将根据需要应用新的宽度值，希望它对你有用，谢谢。

您可以阅读Table-Layout CSS 属性以获取更多信息。

在您使用"bAutoWidth": false 的情况下，您需要手动设置所有列的宽度，而不是使用"aoColumns" 的方法，您可以这样做：

"aoColumnDefs": [
   { "bSortable": false, "aTargets": [ 0 ] },
   { "sWidth": "50px", "aTargets": [0,1,2,3,4,5,6,9,11,12,13,14,15] },
   //            ^ Same width for all columns ( excluding Tel.1, Tel.2 and Fecha ).
   { "sWidth": "80px", "aTargets": [7,8,10] },
   //            ^ Width for 3 columns you want.
],

您的最终 oTable 代码如下所示：

var oTable = $('#maintable').dataTable( {
        "aoColumnDefs": [
            { "bSortable": false, "aTargets": [ 0 ] },
            { "sWidth": "50px", "aTargets": [0,1,2,3,4,5,6,9,11,12,13,14,15] },
            { "sWidth": "80px", "aTargets": [7,8,10] },
        ],
        "aaSorting": [[1, 'asc']],
        "scrollY": 500,
        "scrollX": true,
        "bAutoWidth": false,

        "language": {
            "lengthMenu": "Mostrar _MENU_ datos por pagina.",
            "zeroRecords": "Nada fue encontrado.",
            "info": "Mostrando _PAGE_ de _PAGES_",
            "infoEmpty": "No hay datos disponibles",
            "infoFiltered": "(filtrado de _MAX_ datos totales)",
            "search": "Buscar:",
            "paginate": {
                "first":      "Primero",
                "last":       "Ultimo",
                "next":       "Proximo",
                "previous":   "Previo"
            }
        }
    });

【讨论】：

感谢您的回答，它可以工作，但我想知道如何只编辑这 3 列而使其他列保持不变，因为当我使用“表格布局：固定”时，所有列和标题未对齐并获得奇怪的大小。
@AdrianGonzalez 不客气 :) 我在我的回答中添加了一个建议，希望对您也有帮助，谢谢

【解决方案2】：

只需在 columDefs 中添加这一行：

"columnDefs": [
{ "width": "20%", "targets": [7,8,10] }
]

7、8 和 10 是您的案例中列（Tel 1、Tel 2 和 Fecha）的索引。

【讨论】：

【解决方案3】：

试试这个

"columnDefs": [
{ "width": "100px", "targets": "_all" }
]

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：stackoverflow.com/help/how-to-answer。祝你好运?