Question

我有两个并排放置在一个div元素下的表格。但是，每个表中的项目数不同。较小表中的数据位于底部而不是顶部。我希望数据从顶部开始并继续向下。

这是我的HTML代码：

<div class="form-group">
   <label class="col-md-3 control-label">Baseline/HD diffs</label>
   <div class="col-md-7 container table-responsive">
  {% if item.baseline_diff %}
  <table cellspacing="1" cellpadding="2" class="table table-striped table-hover table-condensed" id="inlineTable" style = "font-size:11px;">
     <thead>
        <tr>
           <th scope="col">Baseline</th>
        </tr>
     </thead>
     {% for d in item.baseline_diff %}
     <tr>
        <td>{{ d }}</td>
     </tr>
     {% endfor %}
  </table>
  {% endif %}
  {% if item.hd_diff %}
  <table class="table table-striped table-hover table-condensed" id="inlineTable" style = "font-size:11px;">
     <thead>
        <tr>
           <th scope="col">HD</th>
        </tr>
     </thead>
     {% for d in item.hd_diff %}
     <tr>
        <td>{{ d }}</td>
     </tr>
     {% endfor %}
  </table>
  {% endif %}
  </div>
 </div>
</div>

这是我的CSS：

#inlineTable {
        display: inline-block;
        width: 40%;
       }

Answer 1

您想使用vertical-align

#inlineTable {
  display: inline-block;
  width: 40%;
  vertical-align: top;
}

https://jsfiddle.net/su9de3zt/

HTML表格底部显示数据

1 个答案: