我正在使用JQuery datatables.I看到列的宽度是相同的。但我希望一些文本数量较少的列与另一个文本较多的列相比宽度较窄。或者至少可以通过拖动列的边框来调整列宽。我了解到有些插件可以提供此功能,但它们都不适用于我。我想知道是否有人有任何提示。 这是我用于创建表的html文件
<table class="table dt-responsive hover order-column cell-border display compact" cellspacing="0" id="dataTable" width="100%">
<thead>
<tr class="dataTableRow">
<th class="id1">ID1</th>
<th class="id2">ID2</th>
<th class="cellWithToolTip matchingNumber">#Mat.
<span class="cellToolTip">Number of Matching Terms</span>
</th>
<th>Matching Terms</th>
<th>Original Terms in Data Source One</th>
<th>Original Terms in Data Source Two</th>
<th>Acc.
<span class="cellToolTip">Accept</span>
</th>
<th>Dec.
<span class="cellToolTip">Decline</span>
</th>
</tr>
</thead>
<tfoot>
<tr class="dataTableRow">
<th>ID1</th>
<th>ID2</th>
<th class="cellWithToolTip">#Mat.
<span class="cellToolTip">Number of Matching Terms</span>
</th>
<th>Matching Terms</th>
<th>Original Terms in Data Source One</th>
<th>Original Terms in Data Source Two</th>
<th class="cellWithToolTip">Acc.
<span class="cellToolTip">Accept</span>
</th>
<th class="cellWithToolTip">Dec.
<span class="cellToolTip">Decline</span>
</th>
</tr>
</tfoot>
</table>
这是我的js文件
var table = $('#dataTable').DataTable({
"ajax": {
"url" : root+"/PVJson",
"dataSrc" : "records"
},
"columns": [
{
"data": "id1"
},
{
"data": "id2"
},
{
"data": "matchingTerms",
"render": function(data, type, row, meta) {
return data.length;
}
},
{
"data": "matchingTerms"
},
{
"data": "orginalTermsTable1"
},
{
"data": "orginalTermsTable2"
},
{
"data": "",
"render": function(data, type, row, meta) {
return "<button>+</button>";
}
},
{
"data": "",
"render": function(data, type, row, meta) {
return "<button>-</button>";
}
}
],
"columnDefs":[
{
"targets":[6,7],
"searchable":false,
"sortable":false
}
]
});
这是css文件:
/* to create tool tip for table's header*/
.cellWithToolTip{
position:relative;
}
.cellToolTip{
display:none;
position:absolute;
z-index:100;
border:1px;
border-radius: 10px;
background-color:white;
border-style:solid;
border-color:#cccccc;
padding:6px;
color:#555555;
top:20px;
left:20px;
font-size:12px;
font-weight:lighter;
}
.cellWithToolTip:hover span.cellToolTip{
display:block;
}
table{table-layout:fixed; width: 100%}
td{width:1px; word-wrap: break-word;}
答案 0 :(得分:0)
尝试使用下表,以便您可以解决调整大小问题
$(document).ready(function() {
var dataTable = $("#datatable").DataTable({
dom: "<'dt-head clearfix'lrf>t<'dt-foot clearfix'ip>",
deferRender: true,
autoWidth: false,
fixedHeader: true,
responsive: true,
language: {
search: "_INPUT_",
searchPlaceholder: "Search",
lengthMenu: "<select>" +
'<option value="10">10</option>' +
'<option value="25">25</option>' +
'<option value="50">50</option>' +
'<option value="100">100</option>' +
'<option value="-1">All</option>' +
"</select> rows per page",
oPaginate: {
sNext: "<i class='fa fa-chevron-right'></i>",
sPrevious: "<i class='fa fa-chevron-left'></i>"
}
}
});
});
&#13;
@charset "UTF-8";
body {
background: #e0e0e0;
padding: 15px 0;
}
.panel {
border-color: #ccc;
border-radius: 0;
box-shadow: none;
margin: 0 15px;
}
.panel .panel-heading {
background: #f8f8f8;
border-color: #ccc;
border-radius: 0;
padding: 10px;
}
.dt-head {
background: #e8e8e8;
}
.dt-head .dataTables_length,
.dt-head .dataTables_filter {
padding: 0;
}
.dt-head .dataTables_length label,
.dt-head .dataTables_filter label {
font-weight: normal;
margin: 0;
}
.dt-head .dataTables_length input,
.dt-head .dataTables_filter input {
border: 1px solid #ccc;
height: 32px;
line-height: 14px;
outline: none;
padding: 8px 10px;
min-width: 225px;
margin: -1px -1px -1px 5px;
transition: all 0.15s ease-in-out;
}
.dt-head .dataTables_length input:focus,
.dt-head .dataTables_filter input:focus {
border: 1px solid #000;
}
.dt-head .dataTables_length select,
.dt-head .dataTables_filter select {
border: 1px solid #ccc;
height: 32px;
margin: -1px 5px -1px -1px;
min-width: 60px;
outline: none;
transition: all 0.15s ease-in-out;
}
.dt-head .dataTables_length select:focus,
.dt-head .dataTables_filter select:focus {
border: 1px solid #000;
}
table.dataTable {
border-top: 1px solid #ccc;
}
table.dataTable thead th,
table.dataTable thead td {
border-bottom: 2px solid #ccc;
padding: 6px 10px;
}
table.dataTable tbody th,
table.dataTable tbody td {
padding: 6px 10px;
}
table.dataTable th {
background: #fff;
font-size: 14px;
}
table.dataTable.no-footer {
border-bottom: 1px solid #ccc;
}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
background-color: #f8f8f8;
}
table.dataTable.fixedHeader-floating.no-footer {
border-bottom: none;
}
table.dataTable thead th {
position: relative;
}
table.dataTable thead th.sorting, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc {
background-image: none;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
position: absolute;
top: 9px;
right: 8px;
display: block;
font: normal normal normal 12px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
table.dataTable thead th.sorting:after {
content: "";
color: #ccc;
}
table.dataTable thead th.sorting_asc:after {
content: "";
}
table.dataTable thead th.sorting_desc:after {
content: "";
}
.dataTables_wrapper .dt-foot {
background: #f8f8f8;
}
.dataTables_wrapper .dt-foot .dataTables_info {
padding: 10px;
}
.dataTables_wrapper .dt-foot .dataTables_paginate {
padding: 0;
}
.dataTables_wrapper .dt-foot .dataTables_paginate .paginate_button,
.dataTables_wrapper .dt-foot .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dt-foot .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dt-foot .dataTables_paginate .paginate_button.current:hover {
border: none;
border-left: 1px solid #ccc;
border-radius: 0;
box-shadow: none;
margin: 0;
}
.dataTables_wrapper .dt-foot .dataTables_paginate .paginate_button {
background: #fff;
color: #333;
padding: 10px 12px;
min-width: 42px;
}
.dataTables_wrapper .dt-foot .dataTables_paginate .paginate_button:hover {
background: #f0f0f0;
color: #333 !important;
}
.dataTables_wrapper .dt-foot .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dt-foot .dataTables_paginate .paginate_button.current:hover {
background: #333;
color: #fff !important;
cursor: default;
font-weight: bold;
}
.dataTables_wrapper .dt-foot .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dt-foot .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dt-foot .dataTables_paginate .paginate_button.disabled:active {
background: #f8f8f8;
color: #999 !important;
}
.dataTables_wrapper .dt-foot .dataTables_paginate .ellipsis {
background: #f8f8f8;
color: #999;
padding: 10px 12px;
min-width: 42px;
display: inline-block;
border-left: 1px solid #ccc;
cursor: default;
}
div.dataTables_scrollBody table.dataTable thead th.sorting:after,
div.dataTables_scrollBody table.dataTable thead th.sorting_asc:after,
div.dataTables_scrollBody table.dataTable thead th.sorting_desc:after {
content: "";
}
&#13;
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading">Datatable</div>
<table class="stripe order-column" id="datatable">
<thead>
<tr>
<th>Header 1</th>
<th class="desktop">Header 2</th>
<th class="min-tablet-l">Header 3</th>
<th class="min-tablet-l">Header 4</th>
<th class="min-tablet-l">Header 5</th>
<th class="desktop">Header 6</th>
<th class="desktop">Header 7</th>
<th>Header 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
<tr>
<td>Table Cell A</td>
<td>Table Cell B</td>
<td>Table Cell C</td>
<td>Table Cell D</td>
<td>Table Cell E</td>
<td>Table Cell F</td>
<td>Table Cell G</td>
<td>Table Cell H</td>
</tr>
</tbody>
</table>
</div>
&#13;