【发布时间】：2018-03-14 23:51:17
【问题描述】：
我正在使用 JQuery 数据表。我看到列宽是相同的。但是我希望与具有大量文本的另一列相比，具有较少文本量的某些列具有更窄的宽度。或者至少能够通过拖动列的边框来调整列宽。我了解到有提供此功能的插件，但它们都不适合我。我想知道是否有人有任何提示。 这是我用于创建表格的 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;}
【问题讨论】：