Huge empty space in table header

Question

I'm trying to create a table. At the moment it only has 2 headers - one with a table and one with a graph. The first header has a huge empty space as you can see in the picture below:

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

My CSS:

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

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

#patient-table{
 clear: both;
}

How do I move the table to the top of its cell to get rid of that space?

score 0 · Answer 1 · answered Jul 20 '17 at 00:04

You've added content into the table header element. This should only be used for column headings. Move the content to the table rows instead. Try

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

I solved it by putting my 's in a and it worked. Thanks. – Jesper Jul 20 '17 at 00:12 — Jesper, Jul 20 '17 at 00:12

score 0 · Answer 2 · answered Jul 20 '17 at 00:04

Usually not a good idea to use tables for layout (see Why not use tables for layout?).

You can probably just throw them in a couple divs instead (there are many ways to accomplish the layout):

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

Alternatively you can just float the 2 interior divs left and right respectively, since flexbox layout isn't compatible in some browsers.

Thanks, didn't know tables were bad to use for layout. Will try out your solutions instead! — Jesper, Jul 20 '17 at 00:13

Huge empty space in table header

2 Answers2