我的演示代码：
SyntaxError: Unexpected token "
at parse (D:\man_node\node_modules\body-parser\lib\types\json.js:83:15)
如何制作HTML两列，其中第一列宽度占容器宽度的25％，第二列宽度为75％，用固定宽度和可变宽度列填充？
我的愿望：
第一步：当我隐藏第一个（div）列时，第二个（div）填满整个容器（宽度= 100％）。
第二步：第二个（div）中带有固定列的表不应改变宽度，这些变量列将会改变。
所以，我使用了jQuery：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
table.one{
table-layout: fixed;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h2>here is my navbar</h2>
<h3>25% width of the container</h3>
</div>
<div class="col-md-9">
<h2>here is my table</h2>
<h3>75% width of the container</h3>
<table id="example" class="table table-bordered table-striped table-hover table-condensed one" width="100%">
<thead>
<tr>
<th width="60"/>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn</th>
<th width="120">Start Date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
[ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
[ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
[ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
[ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
[ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],
[ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
[ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],
[ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
[ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ],
[ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ],
[ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
[ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
[ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
[ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
[ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
[ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
[ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
[ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
[ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
[ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
[ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
[ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
[ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
];
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet/*,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]*/
} );
} );
</script>
</body>
</html>
但是当我设置它们时，第二列中的固定列将改变宽度：
$(".col-sm-3").hide(950); // Hide the nav
$(".col-sm-9").animate({width:"100%"},1000);
// Change the second column's width to 100%
我已经尝试了很多方法来解决它，例如：
将col和colgroup添加到我的表中。我发现列已修复，但我的数据未显示。
名称 位置 办公室 分机 开始日期 薪水我看到很多例子：
示例1：Combining fixed and variable width columns in one table。 例2： Combining fixed and variable width columns in one table 示例3：Table with fixed height and header and colum width with Bootstrap 3 示例4：Fixed width table columns in Bootstrap
我尝试了所有这些，一个在下面：
<th style="width:60px">Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn</th>
<th style="width:120px">Start Date</th>
<th>Salary</th>
但是，当我使用datatable.js时，它在我的项目中效果不佳。http://datatables.net/。你可以看到我的演示代码。
像：
<div class="wrapper">
<table class="table-main">
<tr class="">
<td class="td-quarter2"> </td>
<td class="second"> </td>
<td class="third"> </td>
<td class="fluid">
<table class="table-wrapped">
<tr>
<td class="td-quarter1"> </td>
<td class="td-quarter2"> </td>
<td class="td-quarter3"> </td>
<td class="td-quarter4"> </td>
</tr>
</table>
<table class="table-wrapped1">
<tr>
<td class="td-quarter1"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
这次，我使用
时无法设置第二列填充整个容器<style type="text/css">
table.one{
table-layout: fixed;
}
</style>
<table id="example" class="table table-bordered table-striped table-hover table-condensed one" >
<thead>
<tr>
<th width="60"/>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn</th>
<th width="120">Start Date</th>
<th>Salary</th>
</tr>
</thead>
</table>
表的宽度不会改变。
答案 0 :(得分：0)
这是我的解决方案：
第1步。 我发现使用我的项目的静态数据在demo jsfiddle.net/mev90nLt/14中运行良好，所以我删除了所有项目的css和js，使用demo。它运作良好。
因此，在datatable（）中添加属性如下所示，可以设置您想要的列：
$('#example').DataTable( {
data: dataSet,
autoWidth: false,
"columns": [
{ "width": "60px" },
null,
null,
{ "width": "155px" },
null,
{ "width": "60px" },
]
} );
第2步。 我使用动态数据库for datatable.js，显示了两个问题。第一个是：在您已经初始化一次之后，您无法更改数据表的数据，请在此处查看http://datatables.net/manual/tech-notes/3。所以我添加了detroy（）来解决动态数据问题。
var table = $('#coursetable').DataTable();
tabale.detroy();
table = $('#coursetable').DataTable({data:dataset});
之后，我的专栏无法再修复。
步骤3.当您使用destroy（）函数更新数据表的数据时，如：
var table = $('#coursetable').DataTable();
要初始化空白数据表，数据表将采用一些默认属性，如自动宽度。
解决方案是：第一个数据表应该在执行init时获取属性，如width。
<script>
var table = $('#coursetable').DataTable( {
paging: false,
searching: false,
"bSort" : false,
autoWidth: false,
"columns": [
{ "width": "30px" },
null,
null,
{ "width": "150px" },
null,
{ "width": "70px" },
]
} );
</script>
然后，当您动态更改数据表的数据时，首先使用destroy（）函数，然后再次设置这些属性，如：
function setDataTable(){
table.destroy();
table = $('#coursetable').DataTable( {
data: eval(datatable),
searching: true,
"bSort" : false,
autoWidth: false,
"columns": [
{ "width": "30px" },
null,
null,
{ "width": "150px" },
null,
{ "width": "70px" },
]
} );
}
}
它有效，我的问题解决了。