响应表，无法排队thead和tbody

Question

我创建了一个表，但我无法让<thead>与<tbody>对齐。

该表是响应式的，并且在调整大小时可以正常工作，但这是问题的初始屏幕大小。 我已将float:left添加到<thead>，因此它们正确对齐而不是相互重叠，并希望表格数据以相同的方式排成一行。

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table td {
  font-size: 0.60em;
}

table th {
  font-size: .60em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  table td:before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
  #table-wrapper {
    position: relative;
  }
  #table-scroll {
    overflow: auto;
  }
  #table-wrapper table {
    width: 100%;
  }
  #table-wrapper table * {
    color: black;
    font-size: 12px;
  }
  #table-wrapper table thead th .text {
    text-align: center;
  }
}

<div class="col-12 offset-0">
  <div style="overflow-x:auto">
    <div id="table-wrapper">
      <div id="table-scroll">
        <table class="table table-striped" border="0" cellspacing="0" cellpadding="0" align="center">
          <h4>Success Stream</h4>
          <thead style="float:left">
            <tr>
              <th scope="col">Year</th>
              <th scope="col">{{n1}}'s age</th>
              <th scope="col">{{n2}}'s age</th>
              <th scope="col">Income</th>
              <th scope="col">Personal Contribution to Pension</th>
              <th scope="col">Company Contribution to Pension</th>
              <th scope="col">Personal Contribution to ISA</th>
              <th scope="col">Expenses</th>
              <th scope="col">Cash Flow</th>
              <th scope="col">Growth of Pension</th>
              <th scope="col">Growth of ISA</th>
              <th scope="col">Growth of Other</th>
              <th scope="col">Withdrawals from Pension</th>
              <th scope="col">Withdrawals from ISA</th>
              <th scope="col">Withdrawals from Other</th>
              <th scope="col">Pension Total</th>
              <th scope="col">ISA Total</th>
              <th scope="col">Other Total</th>
              <th scope="col">Full Total</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-label="Year"> 2018</td>
              <td data-label="{{n1}}'s age">55</td>
              <td data-label="{{n2}}'s age">55</td>
              <td data-label="Income">57,000</td>
              <td data-label="Personal Contribution to Pension">5,000</td>
              <td data-label="Company Contribution to Pension">0</td>
              <td data-label="Personal Contribution to ISA">0</td>
              <td data-label="Expenses">50,500</td>
              <td data-label="Cash Flow">1,500</td>
              <td data-label="Growth of Pension">57,737</td>
              <td data-label="Growth of ISA">0</td>
              <td data-label="Growth of Other">0</td>
              <td data-label="Withdrawals from Pension">0</td>
              <td data-label="Withdrawals from ISA">0</td>
              <td data-label="Withdrawals from Other">0</td>
              <td data-label="Pension Total">862,737</td>
              <td data-label="ISA Total">1</td>
              <td data-label="Other Total">1,501</td>
              <td data-label="Full Total">864,239</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Answer 1

而不是仅使用float:left来改变

table {
  table-layout: fixed;
}

到

table {
  table-layout: auto;
}