html - 居中div内的HTML表格无法正确显示

我有一个包含多个表的DIV，这些表正在由数据库搜索填充，因此显示的表量会有所不同。

我希望表彼此相邻，并且这对于前几行有效，但是随后某些东西将表的第四行向下推而出。

这是一个小提琴：https://jsfiddle.net/tcanfarotta22/yn4s6cpv/

<table id='scholarship' style='float:left;' align='center'>
  <th colspan='2'>
    <h3>University of Michigan--Dearborn</h3>
    <h5>MI, Public</h5>
    <h5>Competitive</h5></th>
  <tr>
    <td style='text-align:center;'>
      <h3>$11,524 in-state $23,866 out-of-state</h3>
      <br>
      <h5>Tuition</h5></td>
    <td style='text-align:center;'>
      <h3>63.60%</h3>
      <br>
      <h5>Acceptance Rate</h5></td>
  </tr>
  <tr>
    <td>Scholarship Annual Amount: Full Tuition</td>
    <td>Eligibility: In-state</td>
  </tr>
  <tr>
    <td colspan='2' style='text-align:center;'>
      <h3>Required Test Scores</h3></td>
  </tr>
  <tr>
    <td>SAT: 970 CR+M</td>
  </tr>
  <tr>
    <td>ACT: 21</td>
  </tr>
  <tr>
    <td>GPA: 3</td>
  </tr>
  <tr>
    <td colspan='2'>Mid 50% SAT Score: SAT Math 498-660 SAT Critical Reading not reported SAT Writing 470-600 </td>
  </tr>
  <tr>
    <td colspan='2'>Mid 50% ACT Score: 22-27 </td>
  </tr>
  <tr>
    <td colspan='2'>Is this Scholarship Available for International Students? .</td>
  </tr>
  <tr>
    <td colspan='2'>US News Ranking: not on the list</td>
  </tr>
  <tr>
    <td colspan='2'>Forbes Ranking: #437 Best Colleges</td>
  </tr>
  <tr>
    <td colspan='2'>Money Ranking: </td>
  </tr>
  <tr>
    <td colspan='2' style='text-align:center;'><a href='http://umdearborn.edu/fa_morefreshmanscholarships' target='_blank'>Click Here to Visit Site</a></td>
  </tr>
  <tr>
    <td colspan='2'>
      <input type='checkbox' value='ARLUJ' name='cell[]'>Check the Box to Save</td>
  </tr>
  <tr>
    <td colspan='2' style='text-align:center;'>Scholarship Details</td>
  </tr>
  <tr>
    <td colspan='2'>Detroit Compact Scholarship awards renewable full-tuition scholarships to qualified students from the Detroit Compact High Schools. Students are selected to participate in this program by school administrators. Students are required to have a recalculated GPA of 3.0 and a minimum composite ACT of 21 or SAT combined score of 970.</td>
  </tr>
</table>

编辑：我希望它们显示为每行4个项目。

最佳答案

如果希望它们始终排成一行，则不应使用float。

相反，您可以这样做，将form设为表格，并将div置于表格单元格中。

form {
  display: table;
}

form > div {
  display: table-cell;
  vertical-align: top;
}

https://jsfiddle.net/yn4s6cpv/2/

或使用flexbox，只需添加以下样式：

form {
  display: flex;
}

https://jsfiddle.net/yn4s6cpv/3/

编辑：为了每行显示4个项目。您可以在每第5个项目上设置clear:left。

form > div:nth-child(4n+1) {
  clear: left;
}

https://jsfiddle.net/yn4s6cpv/4/