html - Bootstrap 中的隐藏行有一个高度

Question

当然，这有一个简单的答案，但我无法理解。

我有一个 bootstrap 表，其中包含隐藏的行，这些行在单击隐藏在它后面的行时显示。但是，隐藏的行会显示出来，当它们未被选中时我无法让它们消失。

试图按照这张图片摆脱行之间突出显示的空间:

<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

这样它只会调整隐藏行，而不会覆盖 Bootstrap 表的默认值。此外，您可能希望保留左/右填充，以便隐藏行中的列正确对齐。