如何将列宽设置为 jQuery 数据表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5590778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set column widths to a jQuery datatable?
提问by Haxed
I have a jQuery datatable(outlined in red), but what happens is that the table jumps out of the width I have set for the div(which is 650 px).
我有一个 jQuery 数据表（以红色标出），但发生的情况是该表超出了我为 div 设置的宽度（650 像素）。
Here is the screen shot:
这是屏幕截图：
Here is my code:
这是我的代码：
<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>
Any ideas ?
有任何想法吗 ？
Thanks
谢谢
采纳答案by mu is too short
Try setting the width on the table itself:
尝试设置表格本身的宽度：
<table id="ratesandcharges1" class="grid" style="width: 650px;">
You'll have to adjust the 650 by a couple pixels to account for whatever padding, margins, and borders you have.
您必须将 650 调整几个像素，以考虑您拥有的任何填充、边距和边框。
You'll probably still have some issues though. I don't see enough horizontal space for all those columns without mangling the headers, reducing the font sizes, or some other bit of ugliness.
不过，您可能仍然会遇到一些问题。如果不修改标题、减小字体大小或其他一些丑陋之处，我就看不到所有这些列的足够水平空间。
回答by John K
I found this on 456 Bera St. Man is it a lifesaver!!!
我在 456 Bera St. 找到了这个。它是救命稻草吗！！！
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
But - you don't have a lot of room to spare with your data.
但是 - 您没有足够的空间来处理您的数据。
CSS FTW:
CSS FTW：
<style>
table {
table-layout:fixed;
}
td{
overflow:hidden;
text-overflow: ellipsis;
}
</style>
回答by Ajit Nalawade
Configuration Options:
配置选项：
$(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
]
});
});
Specify the css for the table:
指定表格的 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:
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>
It works for me!
这个对我有用！
回答by Allan Starr
The best solution I found this to work for me guys after trying all the other solutions....
Basically i set the sScrollX to 200% then set the individual column widths to the required % that I wanted. The more columns that you have and the more space that you require then you need to raise the sScrollX %... The null means that I want those columns to retain the datatables auto width they have set in their code.
在尝试了所有其他解决方案后，我发现这对我有用的最佳解决方案......基本上我将 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
});
回答by Kevin Khew
Answer from official website
来自官网的回答
https://datatables.net/reference/option/columns.width
https://datatables.net/reference/option/columns.width
$('#example').dataTable({
"columnDefs": [
{
"width": "20%",
"targets": 0
}
]
});
回答by Raje
In java script calculate width using following code
在java脚本中使用以下代码计算宽度
var scrollX = $(window).width()*58/100;
var oTable = $('#reqAllRequestsTable').dataTable({
"sScrollX": scrollX
} );
回答by Harikrishnan k
by using css we can easily add width to the column.
通过使用 css，我们可以轻松地为列添加宽度。
here im adding first column width to 300px on header (thead)
在这里，我在标题（thead）上将第一列宽度添加到 300px
::ng-deep table thead tr:last-child th:nth-child(1) {
width: 300px!important;
}now add same width to tbody first column by,
现在将相同的宽度添加到 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>
by this way you can easily change width by changing the order of nth child. if you want 3 column then ,add nth-child(3)
通过这种方式，您可以通过更改第 n 个子项的顺序轻松更改宽度。如果你想要 3 列，那么添加 nth-child(3)
