表头中的巨大空白空间

Question

我试图创建一个表。目前它只有2个标题 - 一个带有表格，另一个带有图表。第一个标题有一个巨大的空白区域，如下图所示：

我的HTML：

<table id="patient-table">
  <th>
    <table id="data-table">
      <tr>...</tr>
    </table>
  </th>
  <th>
      <ngx-charts-polar-chart [view]="view" [scheme]="colorScheme" [results]="patientService.patientLevel3.latestReading" [gradient]="gradient"
        [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" legendTitle="" [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale">
      </ngx-charts-polar-chart>
  </th>
</table>

我的CSS：

#data-table{
 border-collapse: collapse;
 font-size: 14px;
}

#data-table th, tr, td{
 border: 1px solid black;
}

#patient-table{
 clear: both;
}

如何将表格移动到其单元格的顶部以摆脱该空间？

Answer 1

您已将内容添加到表头元素中。这应该只用于列标题。而是将内容移动到表行。尝试

<table id="patient-table">
  <th>
      Table
  </th>
  <th>
      Chart
  </th>
  <tr>
   <td>
    <table id="data-table">
      <tr>...</tr>
    </table>
   </td>
  </tr>
  <tr>
    <td>
     <ngx-charts-polar-chart [view]="view" [scheme]="colorScheme" [results]="patientService.patientLevel3.latestReading" [gradient]="gradient"
        [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" legendTitle="" [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale">
      </ngx-charts-polar-chart>
    </td>
  </tr>
</table>

Answer 2

使用表格进行布局通常不是一个好主意（参见Why not use tables for layout?）。

您可以将它们放在几个div中（有很多方法可以完成布局）：

<div class="container">
  <div>
    <table><!-- your data table here --></table>
  </div>
  <div>
    <ngx-charts-polar-chart [view]="view" [scheme]="colorScheme" [results]="patientService.patientLevel3.latestReading" [gradient]="gradient"
        [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" legendTitle="" [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale">
    </ngx-charts-polar-chart>
  </div>
</div>

CSS：

.container {
  display: flex;
  flex-flow: row nowrap;
}

或者，您可以分别向左和向右浮动2个内部div，因为flexbox布局isn't compatible in some browsers。