1
我有一個表中有部分的表。我使用jQuery來隱藏不同的部分，並且該部分工作得很好，但是當我隱藏所有這些部分時，該行發生了某些情況。該行有一個3的colspan，但是當全部隱藏時，它變成只有一列。我附上了下面的jsfiddle鏈接。我似乎無法弄清楚爲什麼會發生這種情況。我試圖讓頭部有25％，25％和50％的列，它沒有做任何事情。另一個問題是，即使我把每行/表格/寬度都設爲100％，它仍然不是窗口的長度。jQuery切換刪除表列
目前我這段代碼
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 200px;
}
對於每一列迫使列的寬度......我不能讓這個要依據％的工作。不幸的是，我不是一個前端開發人員，像這樣的小事情很煩人，想要弄明白。
另外我注意到，在下面的代碼片段不起作用，只有在JsFiddle它沒有。
$(document).ready(function() {
$("tr").click(function() {
$(this).toggleClass("highlighted");
})
$('.ok').on('click', function(e) {
var selected = [];
$("#table tr.highlighted").each(function() {
selected.push($('td:first', this).html());
});
alert(selected);
});
$('.hd').click(function() {
$(this).toggleClass('expand').nextUntil('tr.hd').slideToggle(1);
});
});.tableDiv {
border: 1px solid #6C8CD9;
width:100%;
}
.tableTitle {
height: 20px;
background-color: #D4DFFA;
font: bold 8pt Tahoma Black;
text-align: left;
padding-top: 5px;
padding-left: 5px;
border: 1px solid #FFFFFF;
}
.tableFunction {
height: 20px;
background-color: #D4DFFA;
color: #737373;
font: 8pt Tahoma;
text-align: left;
padding-top: 5px;
padding-left: 5px;
border: 1px solid #FFFFFF;
border-top: 0px;
}
.fixed_headers {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
border-right: 1px solid #EBEFF3;
border-bottom: 1px solid #A8BBE0;
padding: 4px;
text-align: left;
font: normal 8pt Tahoma;
background: -webkit-linear-gradient(#FFFFFF, #DFE7F7);
border-top: 1px solid #A8BBE0;
height: 20px;
width: 100%;
}
.fixed_headers td {
border-right: 1px solid #EBEFF3;
border-bottom: 1px solid #EBEFF3;
padding: 4px;
text-align: left;
font: normal 8pt Tahoma;
}
.fixed_headers thead {
background: -webkit-linear-gradient(#FFFFFF, #DFE7F7);
color: #737373;
width: 100%;
}
.fixed_headers thead tr {
width: 100%;
display: block;
position: relative;
}
.fixed_headers thead td {
color: #737373;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tr:nth-child(odd) {
width: 100%;
background-color: #f0f4fa;
}
.fixed_headers tr:nth-child(even) {
width: 100%;
background-color: #ffffff;
}
.fixed_headers tr.highlighted {
color: #261F1D;
background-color: #FFCC66;
}
.fixed_headers tr:hover {
color: #261F1D;
background-color: #FFE8BA;
}
.fixed_headers tr.hd {
cursor: pointer;
font: bold 8pt Tahoma;
background-color: #FFE0BA;
}
.hd .sign:after {
content: "-";
display: inline-block;
}
.fixed_headers tr.sub-hd {
cursor: pointer;
font: bold 8pt Tahoma;
background-color: #FF10AA;
}
.hd.expand .sign:after {
content: "+";
}<div class="tableDiv">
<div class="tableTitle">
Title for the table
</div>
<div class="tableFunction">
Table function
</div>
<table class="fixed_headers" id="table">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr class="hd">
<td colspan='3'>Header <span class="sign"></span></td>
</tr>
<tr class="sub-hd">
<td colspan='3'>Sub Header</td>
</tr>
<tr>
<td>Apple</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple/Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr class="hd">
<td colspan="3">Header <span class="sign"></span></td>
</tr>
<tr class="sub-hd">
<td colspan='3'>Sub Header</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr class="sub-hd">
<td colspan='3'>Sub Header</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr class="sub-hd">
<td colspan='3'>Sub Header</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr class="hd">
<td colspan="3">Header <span class="sign"></span></td>
</tr>
<tr class="sub-hd">
<td colspan='3'>Sub Header</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr class="sub-hd">
<td colspan='3'>Sub Header</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>
</div>
<input type="button" name="OK" class="ok" value="OK" />