我有一个表格，我希望能够通过检查/取消选中复选框来隐藏列。
我希望将标题固定在表格上方，但无论行数如何，都要进行调整。
$(".views-field-title").addClass("show");
$(".view-reports .view-header input").change(function() {
if ($('input.code').is(':checked')) {
$('.views-field-field-code').addClass("show");
} else {
$('.views-field-field-code').removeClass("show");
};
if ($('input.type').is(':checked')) {
$('.views-field-field-posting-type').addClass("show");
} else {
$('.views-field-field-posting-type').removeClass("show");
};
if ($('input.source').is(':checked')) {
$('.views-field-field-source').addClass("show");
} else {
$('.views-field-field-source').removeClass("show");
};
if ($('input.posted').is(':checked')) {
$('.views-field-field-posted-date').addClass("show");
} else {
$('.views-field-field-posted-date').removeClass("show");
};
if ($('input.locations').is(':checked')) {
$('.views-field-field-locale-posting').addClass("show");
} else {
$('.views-field-field-locale-posting').removeClass("show");
};
});.check-hide .view-content {
height: 300px;
overflow: auto;
}
/* CSS for Adjustable rows */
.check-hide .views-field {
display: none;
}
.view-reports .views-field.show,
.view-reports .views-field.views-field-title {
display: table-cell;
padding: 5px 10px;
}
.check-hide.view-reports .view-header {
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
min-width: 500px;
max-width: 80%;
margin: 0 auto;
height: 50px;
display: block;
}
.check-hide.view-reports .view-header > span {
vertical-align: middle;
display: inline-block;
*display: inline;
color: #cac8c8;
zoom: 1;
margin-right: 10px;
}
.check-hide.view-reports .view-header > span > input {
margin-right: 5px;
}
.view-reports .view-header .stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
/* CSS for table */
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-reports check-hide">
<div class="view-header">
<span><input type="checkbox" name="code" value="code" class=
"code" />Code</span> <span><input type="checkbox" name="type"
value="type" class="type" />Type</span> <span><input type=
"checkbox" name="source" value="source" class=
"source" />Source</span> <span><input type="checkbox" name=
"posted" value="posted" class="posted" />Date Posted</span>
<span><input type="checkbox" name="locations" value=
"locations" class="locations" />Locations</span>
</div>
<div class="view-content">
<table class="views-table cols-7">
<thead>
<tr>
<th class="views-field views-field-counter" scope="col">
</th>
<th class="views-field views-field-field-code" scope="col">
Code
</th>
<th class="views-field views-field-field-posting-type" scope="col">
Type
</th>
<th class="views-field views-field-field-source" scope="col">
Source
</th>
<th class="views-field views-field-field-posted-date" scope="col">
Date Posted
</th>
<th class="views-field views-field-field-locale-posting" scope="col">
Locations
</th>
<th class="views-field views-field-title show" scope="col">
Title
</th>
</tr>
</thead>
<tbody>
<tr class="odd views-row-first">
<td class="views-field views-field-counter">1.</td>
<td class="views-field views-field-field-code">
6222</td>
<td class="views-field views-field-field-posting-type">
Detailed</td>
<td class="views-field views-field-field-source">
<a href="/posting-source/employer">Employer</a>
</td>
<td class="views-field views-field-field-posted-date">
<span class="date-display-single">Sep 26,
2016</span>
</td>
<td class="views-field views-field-field-locale-posting">
<a href="/taxonomy/term/2">Tofino</a>
</td>
<td class="views-field views-field-title show">
<a href="/job-posting/15157">WEEKEND
MERCHANDISER</a>
</td>
</tr>
<tr class="even">
<td class="views-field views-field-counter">2.</td>
<td class="views-field views-field-field-code">
6322</td>
<td class="views-field views-field-field-posting-type">
Detailed</td>
<td class="views-field views-field-field-source">
<a href="/posting-source/employer">Employer</a>
</td>
<td class="views-field views-field-field-posted-date">
<span class="date-display-single">Sep 26,
2016</span>
</td>
<td class="views-field views-field-field-locale-posting">
<a href="/taxonomy/term/1">Port Alberni</a>
</td>
<td class="views-field views-field-title show">
<a href="/job-posting/15156">Cook</a>
</td>
</tr>
<tr class="odd">
<td class="views-field views-field-counter">3.</td>
<td class="views-field views-field-field-code">
6513</td>
<td class="views-field views-field-field-posting-type">
Detailed</td>
<td class="views-field views-field-field-source">
<a href="/posting-source/employer">Employer</a>
</td>
<td class="views-field views-field-field-posted-date">
<span class="date-display-single">Sep 26,
2016</span>
</td>
<td class="views-field views-field-field-locale-posting">
<a href="/taxonomy/term/1">Port Alberni</a>
</td>
<td class="views-field views-field-title show">
<a href="/job-posting/15155">Servers</a>
</td>
</tr>
<tr class="even">
<td class="views-field views-field-counter">4.</td>
<td class="views-field views-field-field-code">
6733</td>
<td class="views-field views-field-field-posting-type">
Detailed</td>
<td class="views-field views-field-field-source">
<a href="/posting-source/employer">Employer</a>
</td>
<td class="views-field views-field-field-posted-date">
<span class="date-display-single">Sep 23,
2016</span>
</td>
<td class="views-field views-field-field-locale-posting">
<a href="/taxonomy/term/2">Tofino</a>
</td>
<td class="views-field views-field-title show">
<a href="/job-posting/15153">General
Maintenance</a>
</td>
</tr>
<tr class="odd">
<td class="views-field views-field-counter">5.</td>
<td class="views-field views-field-field-code">*</td>
<td class="views-field views-field-field-posting-type">
Link</td>
<td class="views-field views-field-field-source">
<a href="/posting-source/website">Website</a>
</td>
<td class="views-field views-field-field-posted-date">
<span class="date-display-single">Sep 22,
2016</span>
</td>
<td class="views-field views-field-field-locale-posting">
<a href="/taxonomy/term/1">Port Alberni</a>
</td>
<td class="views-field views-field-title show">
<a href="/job-posting/14289">** Wage Subsidy Info
Session at AVEC**</a>
</td>
</tr>
<tr class="even">
<td class="views-field views-field-counter">6.</td>
<td class="views-field views-field-field-code">
7271</td>
<td class="views-field views-field-field-posting-type">
Detailed</td>
<td class="views-field views-field-field-source">
<a href="/posting-source/employer">Employer</a>
</td>
<td class="views-field views-field-field-posted-date">
<span class="date-display-single">Sep 23,
2016</span>
</td>
<td class="views-field views-field-field-locale-posting">
<a href="/taxonomy/term/2">Tofino</a>
</td>
<td class="views-field views-field-title show">
<a href="/job-posting/15152">Carpenter</a>
</td>
</tr>
<tr class="odd">
<td class="views-field views-field-counter">7.</td>
<td class="views-field views-field-field-code">*</td>
<td class="views-field views-field-field-posting-type">
Link</td>
<td class="views-field views-field-field-source">
<a href="/posting-source/website">Website</a>
</td>
<td class="views-field views-field-field-posted-date">
<span class="date-display-single">Sep 22,
2016</span>
</td>
<td class="views-field views-field-field-locale-posting">
<a href="/taxonomy/term/1">Port Alberni</a>
</td>
<td class="views-field views-field-title show">
<a href="/job-posting/14751">**Self-Employment Info
Session at AVEC**</a>
</td>
</tr>
<tr class="even">
<td class="views-field views-field-counter">8.</td>
<td class="views-field views-field-field-code">
4032</td>
<td class="views-field views-field-field-posting-type">
Link</td>
<td class="views-field views-field-field-source">
<a href="/posting-source/website">Website</a>
</td>
<td class="views-field views-field-field-posted-date">
<span class="date-display-single">Sep 23,
2016</span>
</td>
<td class="views-field views-field-field-locale-posting">
<a href="/taxonomy/term/2">Tofino</a>
</td>
<td class="views-field views-field-title show">
<a href="/job-posting/1481534">Grade 5 Classroom
Teacher</a>
</td>
</tr>
<tr class="odd">
<td class="views-field views-field-counter">9.</td>
<td class="views-field views-field-field-code">
5124</td>
<td class="views-field views-field-field-posting-type">
Link</td>
<td class="views-field views-field-field-source">
<a href="/posting-source/workbc">WorkBC</a>
</td>
<td class="views-field views-field-field-posted-date">
<span class="date-display-single">Sep 23,
2016</span>
</td>
<td class="views-field views-field-field-locale-posting">
<a href="/taxonomy/term/2">Tofino</a>
</td>
<td class="views-field views-field-title show">
<a href="/job-posting/336867">Communications and
Engagement Specialist</a>
</td>
</tr>
<tr class="even">
<td class="views-field views-field-counter">10.</td>
<td class="views-field views-field-field-code">
1511</td>
<td class="views-field views-field-field-posting-type">
Link</td>
<td class="views-field views-field-field-source">
<a href="/posting-source/other">Other</a>
</td>
<td class="views-field views-field-field-posted-date">
<span class="date-display-single">Sep 23,
2016</span>
</td>
<td class="views-field views-field-field-locale-posting">
<a href="/taxonomy/term/2">Tofino</a>
</td>
<td class="views-field views-field-title show">
<a href="/job-posting/15149">Post Office Assistant -
Term</a>
</td>
</tr>
<tr class="odd">
<td class="views-field views-field-counter">11.</td>
<td class="views-field views-field-field-code">
4412</td>
<td class="views-field views-field-field-posting-type">
Detailed</td>
<td class="views-field views-field-field-source">
<a href="/posting-source/employer">Employer</a>
</td>
<td class="views-field views-field-field-posted-date">
<span class="date-display-single">Sep 23,
2016</span>
</td>
<td class="views-field views-field-field-locale-posting">
<a href="/taxonomy/term/2">Tofino</a>
</td>
<td class="views-field views-field-title show">
<a href="/job-posting/15148">Housekeeper</a>
</td>
</tr>
<tr class="even">
<td class="views-field views-field-counter">12.</td>
<td class="views-field views-field-field-code">
6314</td>
<td class="views-field views-field-field-posting-type">
Link</td>
<td class="views-field views-field-field-source">
<a href="/posting-source/website">Website</a>
</td>
<td class="views-field views-field-field-posted-date">
<span class="date-display-single">Sep 23,
2016</span>
</td>
<td class="views-field views-field-field-locale-posting">
<a href="/taxonomy/term/1">Port Alberni</a>
</td>
<td class="views-field views-field-title show">
<a href="/job-posting/52582">Customer
Representative</a>
</td>
</tr>
<tr class="odd">
<td class="views-field views-field-counter">13.</td>
<td class="views-field views-field-field-code">
1111</td>
<td class="views-field views-field-field-posting-type">
Detailed</td>
<td class="views-field views-field-field-source">
<a href="/posting-source/employer">Employer</a>
</td>
<td class="views-field views-field-field-posted-date">
<span class="date-display-single">Sep 23,
2016</span>
</td>
<td class="views-field views-field-field-locale-posting">
<a href="/taxonomy/term/1">Port Alberni</a>
</td>
<td class="views-field views-field-title show">
<a href="/job-posting/15146">Assistant
Accountant</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>