HTML как установить ширину таблицы в px

Question

Это может быть глупый вопрос, но я не могу установить ширину с определенным количеством пикселей для строк таблицы.

Я использую angular и вычисляю ширину ячейки при инициализации представления (и дайте мне число 275px на столбец).

Итак, я установил это значение в таблице th следующим образом: [style.width]="cellWidth + 'px'" И стиль применяется, так как я нашел это на своих элементах th:

element.style {
    width: 275px;
}

Но моя таблица не вся в 275px, первый столбец - 274px, а третий - 276px. Зачем удалять пиксель из одного столбца, чтобы добавить его в другой?

И когда я меняю ширину окна, у меня возникает та же проблема, у меня всегда есть разница в 1 или 2 пикселя между столбцами.

Как я могу иметь фиксированную ширину?

Answer 1

Если содержание меньше 275 пикселей, проблема связана с заполнением (ваш контент будет шириной + 2 * заполнением): таблица, th, tr имеют заполнение по умолчанию. Если вы действительно хотите 275 пикселей, вы должны также использовать минимальную ширину, а не ширину.

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