数据表列宽度
Datatable columns width
本文关键字：数据表 更新时间：2023-09-26
我已经建立了一个包含多行和多列的数据表，我想知道如何将"电话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>
尝试将table-layout更改为fixed，只需添加以下CSS:
table.display {
table-layout: fixed;
}
现在，新的宽度值将根据您的需要应用，我希望它对您有效，谢谢
有关更多信息，您可以阅读TableLayoutCSS属性。
在您使用"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"
}
}
});
只需在列Defs:内添加此行
"columnDefs": [
{ "width": "20%", "targets": [7,8,10] }
]
7、8和10是您案例中的列（电话1、电话2和Fecha）的索引。
尝试这个
"columnDefs": [
{ "width": "100px", "targets": "_all" }
]
相关文章：
- 用程序搜索JQuery数据表中的文本
- 具有rowGrouping的数据表无法隐藏列
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 将单击事件添加到数据表
- 使用带有参数的数据表sAjaxSource
- 对角度数据表中括号内的数字进行排序
- 动态构建一个数据表与scriplets
- jquery数据表的自定义ko绑定
- 预览数据表单
- 如何在数据表中设置从Ajax响应选中的复选框
- DT数据表背景颜色为黑色，但仍有悬停和选择颜色
- 数据表-隐藏/显示列
- 对损坏的子行进行排序的数据表
- 数据表排序但对行进行分组
- 数据表1.10，第列.转发器使用情况
- 如何将JSON编码的PHP数组发送到同一页面上的数据表
- jquery数据表在初始化时设置宽度
- Laravel数据表无效的JSON响应
- 数据表通过分析一列的值对其进行排序
- 如何通过下拉值更改来更改jquery数据表的值
