Html 表头中有巨大的空白

我正在尝试创建一个表。目前它只有两个标题——一个是表格，一个是图表。第一个标题有一个巨大的空白，如下图所示：

我的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>

---

如何将表格移动到单元格顶部以消除该空间？

您已将内容添加到表格标题元素中。这只能用于列标题。将内容移到表行中。试一试

<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>

桌子
图表
...

使用表格进行布局通常不是一个好主意（请参阅）

您可能只需将它们放入几个

div

s即可（完成布局的方法有很多）：

---

或者，由于flexbox布局，您可以将2个interior

div

s分别向左和向右浮动。

我通过将我的放入a中解决了这个问题，它成功了。谢谢。谢谢，我不知道桌子不适合用于布局。我们将尝试您的解决方案！

<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>

<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>

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