jQuery切换删除表列

Question

我有一张桌子里面有部分。我正在使用jQuery来隐藏不同的部分，并且该部分工作得非常好，但是当我隐藏所有部分时，行就会发生一些事情。该行的colspan为3，但当全部隐藏时，它只变为一列。我已经附上了下面的jsfiddle链接。我似乎无法弄清楚为什么会这样。我尝试使用标题将列分别设置为25％，25％和50％，并且它没有做任何事情。我的另一个问题是，即使我将每行/表/宽度100％放置，它仍然不是窗口的长度。

目前我正在通过此代码

强制列的宽度

.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
 }

对于每个列...我无法使其成为基于％的工作。不幸的是，我不是一个前端的开发人员，像这样的小事情很难找到。

另外我注意到在标题下面的片段不起作用，只有它在JsFiddle中才有效。

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" />

Answer 1

问题在于tbody的显示属性

刚刚更新了你的小提琴，请检查

[http://jsfiddle.net/zhx64egb/32/]