HTML如何设置以px为单位的表格宽度

Question

这可能是一个愚蠢的问题，但我无法在表行中设置一定像素量的宽度。

我在视图初始化时使用角度并计算单元格宽度(并给我一个每列275px的数字(。

因此，我将其设置为表中的第th个，如下所示：[style.width]="cellWidth + 'px'"自从我在我的th元素上发现这一点以来，这种风格就被应用了：

element.style {
width: 275px;
}

但我的表并不全是275px，第一列是274px，第三列是276px。。为什么要从一列中删除一个像素，然后将其添加到另一列中？

当我改变窗口的宽度时，我也有同样的问题，我的列之间总是有1或2倍的差异。

我怎么能有一个固定的宽度？

Answer 1

如果内容小于275px，则问题与填充有关(您的内容将是宽度+2*填充(：table、th、tr有默认填充。如果你真的想要275px，你也应该使用最小宽度而不是宽度。

Css

table, th, td {
padding:0;
}

Html

<table >
<tr>
<th [style.minWidth]="cellWidth + 'px'">Company</th>
<th [style.minWidth]="cellWidth + 'px'">Contact</th>
<th [style.minWidth]="cellWidth + 'px'">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>

TS

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular';
cellWidth=275;
}

https://stackblitz.com/edit/angular-h9abbu