html - Angular 5 无法调整 html 表格上的单元格高度
问题描述
在我的 Angular 应用程序中,我有一个仅表示 html 表的组件。我遇到的问题是我无法降低单元格的高度。好像我的css对显示没有影响。
这里 headers & catNames var 在我的 component.ts 中:
catNames : string[] = ["Toto", "Tata", "Titi", "Mama", "Momo"];
headers: string[] = ["Head1", "Head2", "Head3", "Head4", "Head5"];
这是我的组件 HTML:
<table>
<tr>
<th *ngFor="let header of headers">
{{header}}
</th>
</tr>
<tr>
<td *ngFor="let cat of catNames">
<p>{{cat}}</p>
</td>
</tr>
</table>
这是我的 CSS :
table {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
border-collapse: collapse;
text-align: center;
width: 100%;
font-size: 12pt;
}
th {
border: 1px solid #dddddd;
text-align: center;
padding: 0px;
color: white;
background-color: dodgerblue;
}
td {
display:table-cell;
border: 1px solid #dddddd;
text-align: center;
margin: 0;
padding: 0;
border-spacing: 0;
}
它是如何显示的,我想删除单元格顶部和底部边框上的额外空间:
我的 CSS 值有什么错误吗?
解决方案
删除<P>
标签。因为它会给自己填充。否则以减号填充。但这不是正确的方法。所以最好的方法是删除<p>
并仅使用插值,它将被视为文本。或者你可以直接给 css<p>
而不是 td。
推荐阅读
- resttemplate - RestTemplate - 在 reties 之间对不同端点的 Rest 调用
- android - 使用循环或 List.generate 时如何获取容器宽度?
- opengl - OpenGL:加载 3d 模型(比如 obj 文件)后如何找到正确的缩放因子?
- c++ - 如何将最后一个元素添加到包含c ++中数组的结构的向量中
- react-native - 如何在本机反应中显示来自变量的图像?
- playwright - 无法从页面加载回调调用 ContentAsync
- docker - 如何将 docker 命令转换为 docker-compose
- google-apps-script - 带有可安装日历事件触发器的 Workspace 插件停止使用新部署
- ruby-on-rails - Rails 应用程序中的 CanCanCan gem:对特定关系条件的错误解释和意外弃用警告
- android - 如何从本地存储加载媒体以将视频投射到 Android TV?