表头中巨大的空白位置

我试图创建一个表格。目前它只有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; 
}

如何移动桌子到它的细胞顶部摆脱那个空间？

来源

2017-07-19 Jesper

您已将内容添加到表格标题元素中。这应该只用于列标题。改为将内容移至表格行。尝试

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

来源

2017-07-20 00:04:03 garethb

我解决了这个问题，把我的放在之内，它就起作用了。谢谢。 – Jesper

通常使用表格进行布局（见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。

来源

2017-07-20 00:04:14

谢谢，不知道桌子不好用于布局。将尝试您的解决方案！ – Jesper

表头中巨大的空白位置

回答

相关问题