Bootstrap中的隐藏行有一个高度

Question

当然这有一个简单的答案,但无法理解它.

我有自举表,隐藏的行显示在它隐藏在后面的行的点击.但是,隐藏的行显示出来,当它们未被选中时,我无法让它们消失.

试图摆脱行之间突出显示的空间,如下图所示:

<table class='table table-hover table-bordered table-striped'>
    <thead>
      <tr>
        <th>Status</th>
        <th>Name</th>
        <th>GuideWire</th>
      </tr>
    </thead>
    <tbody>
      <tr data-toggle='collapse' data-target='#info_1'>
        <td>Good</td>
        <td>FooBar</td>
        <td>Something else</td>
      </tr>
      <tr>
        <td colspan='8' class='hidden-row'>
          <div class='collapse' id='info_1'>
            <table class="table table-condensed table-sm small">
              <thead>
                <th>ABC</th>
                <th>DEF</th>
              </thead>
              <tbody>
                <tr>
                  <td>S1</td>
                  <td>Blah</td>
                </tr>
                <tr>
                  <td>S1</td>
                  <td>Blah</td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
      <tr data-toggle='collapse' data-target='#info_2'>
        <td>Good 2</td>
        <td>FooBar 2</td>
        <td>Something else 2</td>
      </tr>
      <tr>
        <td colspan='8' class='hidden-row'>
          <div class='collapse' id='info_2'>
            <table class="table table-condensed table-sm small">
              <thead>
                <th>ABC</th>
                <th>DEF</th>
              </thead>
              <tbody>
                <tr>
                  <td>S1</td>
                  <td>Blah</td>
                </tr>
                <tr>
                  <td>S1</td>
                  <td>Blah</td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

如果你知道如何获得.table-striped以忽略隐藏的行,那就太好了.

Answer 1

它是顶部和底部填充.你可以用..重置它

.table>tbody .hidden-row {
   padding: 0 8px;
}

http://www.codeply.com/go/Ev7XStMM0f

这样它只调整hidden-row,而不是覆盖Bootstrap表的默认值.此外,您可能希望保持左/右填充,以使隐藏行中的列正确对齐.