如何将列宽设置为 jQuery 数据表？
Posted
技术标签:
【中文标题】如何将列宽设置为 jQuery 数据表？【英文标题】：How to set column widths to a jQuery datatable? 【发布时间】：2011-08-01 05:42:56 【问题描述】：我有一个 jQuery 数据表（以红色标出），但发生的情况是表格超出了我为 div 设置的宽度（即 650 像素）。
这是屏幕截图：
这是我的代码：
<script type="text/javascript">
var ratesandcharges1;
$(document).ready(function()
/* Init the table*/
$("#ratesandcharges1").dataTable(
"bRetrieve": false,
"bFilter": false,
"bSortClasses": false,
"bLengthChange": false,
"bPaginate": false,
"bInfo": false,
"bJQueryUI": true,
"bAutoWidth": false,
"aaSorting": [[2, "desc"]],
"aoColumns": [
sWidth: '9%' ,
sWidth: '9%' ,
sWidth: '9%' ,
sWidth: '9%' ,
sWidth: '9%' ,
sWidth: '9%' ,
sWidth: '9%' ,
sWidth: '9%' ,
sWidth: '9%' ,
sWidth: '9%' ,
sWidth: '10%' ]
);
ratesandcharges1.fnDraw();
);
</script>
<div id="ratesandcharges1Div" style="width: 650px;">
<table id="ratesandcharges1" class="grid" >
<thead>
<!--Header row-->
<tr>
<th>Charge Code</th>
<th>Rates</th>
<th>Quantity</th>
<th>Total Charge</th>
<th>VAT %</th>
<th>Calc. Type</th>
<th>Paid By</th>
<th>From</th>
<th>To</th>
<th>VAT</th>
<th>MVGB</th>
</tr>
</thead>
<!--Data row-->
<tbody>
<tr>
<td>Day/Tag</td>
<td>55.00</td>
<td>3.00</td>
<td>165.00</td>
<td>20.00</td>
<td>Rental Time</td>
<td>Bill-to/Agent</td>
<td>5/11/2010</td>
<td>08/11/2010</td>
<td>33.00</td>
<td>1.98</td>
</tr>
<tr>
<td>PAI</td>
<td>7.50</td>
<td>3.00</td>
<td>22.50</td>
<td>20.00</td>
<td>Rental Time</td>
<td>Driver/Cust.</td>
<td>5/11/2010</td>
<td>08/11/2010</td>
<td>4.50</td>
<td>0.00</td>
</tr>
<tr>
<td>BCDW</td>
<td>15.00</td>
<td>3.00</td>
<td>45.00</td>
<td>20.00</td>
<td>Rental Time</td>
<td>Driver/Cust.</td>
<td>5/11/2010</td>
<td>08/11/2010</td>
<td>9.00</td>
<td>0.54</td>
</tr>
<tr>
<td>BTP</td>
<td>7.15</td>
<td>3.00</td>
<td>21.45</td>
<td>20.00</td>
<td>Rental Time</td>
<td>Driver/Cust.</td>
<td>5/11/2010</td>
<td>08/11/2010</td>
<td>4.29</td>
<td>0.26</td>
</tr>
</tbody>
</table>
</div>
有什么想法吗？
谢谢
【问题讨论】：
你试过用width="650px"而不是style="width: 650px;"
【参考方案1】：
我在 456 Bera St. Man 找到了这个。它是救生员吗！！！
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
但是 - 您没有足够的空间来处理您的数据。
CSS FTW：
<style>
table
table-layout:fixed;
td
overflow:hidden;
text-overflow: ellipsis;
</style>
【讨论】：
这解决了问题。不幸的是，设置选项不起作用，所以我欢迎这个修复。 太棒了！我不知道为什么，但是如果没有上面的样式，我的代码$('#revTable').dataTable( "columns": [ "width": "8%" , "width": "12%" , "width": "17%" , "width": "10%" , "width": "15%" , "width": "12%" , "width": "8%" ] ); 将无法工作。谢谢。
如果我错了，请纠正我。使用这种方法肯定会替换掉多余的数据并用省略号替换，但整个数据只显示在一个甚至无法选择的工具提示中。如果这是正确的，如果有什么方法可以建议使整个文本可选择，我必须在我的项目中实施类似的解决方案？【参考方案2】：
配置选项：
$(document).ready(function ()
$("#companiesTable").dataTable(
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bAutoWidth": false, // Disable the auto width calculation
"aoColumns": [
"sWidth": "30%" , // 1st column width
"sWidth": "30%" , // 2nd column width
"sWidth": "40%" // 3rd column width and so on
]
);
);
指定表格的css：
table.display
margin: 0 auto;
width: 100%;
clear: both;
border-collapse: collapse;
table-layout: fixed; // add this
word-wrap:break-word; // add this
HTML：
<table id="companiesTable" class="display">
<thead>
<tr>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
<% for(Company c: DataRepository.GetCompanies()) %>
<tr>
<td><%=c.getName()%></td>
<td><%=c.getAddress()%></td>
<td><%=c.getTown()%></td>
</tr>
<% %>
</tbody>
</table>
它对我有用！
【讨论】：
正是我需要的：配置选项。 我怎样才能只在第三列分配宽度？ 非常适合旧版数据表。【参考方案3】：尝试设置表格本身的宽度：
<table id="ratesandcharges1" class="grid" style="width: 650px;">
您必须将 650 调整几个像素以考虑您拥有的任何填充、边距和边框。
不过，您可能仍然会遇到一些问题。如果不破坏标题、减小字体大小或其他一些丑陋之处，我看不到所有这些列的足够水平空间。
【讨论】：
是的，我试过了。在浏览器中仍然是相同的结果。是否可以将宽度设置为 650px 并使数据表可从左到右滚动以查看最右侧的内容。感谢您的回复。 您可以将overflow-x: auto 放在#ratesandcharges1Div 上，这样会在周围的<div> 上放置一个水平滚动条。
我也遇到了同样的问题。 overflow-x: auto 做了它应该做的，但是改变表格的宽度没有效果。【参考方案4】：
在尝试了所有其他解决方案之后，我发现这对我有用的最佳解决方案...... 基本上我将 sScrollX 设置为 200%，然后将各个列的宽度设置为我想要的所需百分比。您拥有的列越多，需要的空间就越多，那么您需要提高 sScrollX %... null 表示我希望这些列保留它们在代码中设置的数据表自动宽度。
$('#datatables').dataTable
(
"sScrollX": "200%", //This is what made my columns increase in size.
"bScrollCollapse": true,
"sScrollY": "320px",
"bAutoWidth": false,
"aoColumns": [
"sWidth": "10%" , // 1st column width
"sWidth": "null" , // 2nd column width
"sWidth": "null" , // 3rd column width
"sWidth": "null" , // 4th column width
"sWidth": "40%" , // 5th column width
"sWidth": "null" , // 6th column width
"sWidth": "null" , // 7th column width
"sWidth": "10%" , // 8th column width
"sWidth": "10%" , // 9th column width
"sWidth": "40%" , // 10th column width
"sWidth": "null" // 11th column width
],
"bPaginate": true,
"sDom": '<"H"TCfr>t<"F"ip>',
"oTableTools":
"aButtons": [ "copy", "csv", "print", "xls", "pdf" ],
"sSwfPath": "copy_cvs_xls_pdf.swf"
,
"sPaginationType":"full_numbers",
"aaSorting":[[0, "desc"]],
"bJQueryUI":true
);
【讨论】：
【参考方案5】：官网回答
https://datatables.net/reference/option/columns.width
$('#example').dataTable(
"columnDefs": [
"width": "20%",
"targets": 0
]
);
【讨论】：
【参考方案6】：在 java 脚本中使用以下代码计算宽度
var scrollX = $(window).width()*58/100;
var oTable = $('#reqAllRequestsTable').dataTable(
"sScrollX": scrollX
);
【讨论】：
【参考方案7】：通过使用 css，我们可以轻松地为列添加宽度。
这里我在标题 (thead) 上将第一列宽度添加到 300 像素
::ng-deep table thead tr:last-child th:nth-child(1)
width: 300px!important;
现在为 tbody 的第一列添加相同的宽度，
<table datatable class="display table ">
<thead>
<tr>
<th class="text-left" style="width: 300px!important;">name</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left" style="width: 300px!important;">jhon mathew</td>
</tr>
</tbody>
</table>
通过这种方式，您可以通过更改第 n 个孩子的顺序来轻松更改宽度。 如果你想要 3 列，则添加 nth-child(3)
【讨论】：
以上是关于如何将列宽设置为 jQuery 数据表？的主要内容，如果未能解决你的问题，请参考以下文章