复选框表 - 相等的列宽

Question

我正在努力构建一个列宽相等的表格，除了第一个（仅用于复选框），它应该尽可能小。但是复选框溢出。知道如何解决这个问题吗？我正在这样做：

table {
  table-layout: fixed;
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid red;
  width: auto;
}

td:first-of-type {
  width: 1%;
  white-space: nowrap;
}

<table>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Long non-important text</td>
    <td>Mid length</td>
    <td>Short</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Long non-important text</td>
    <td>Mid length</td>
    <td>Short</td>
  </tr>
</table>

jsfiddle 示例

Answer 1

对于第一列，以像素为单位给出宽度

td:first-of-type {
  width: 20px;
}

如果您正在创建一个组件并希望该组件使用各种 具有不同大小的复选框的时间然后取第一个的宽度 调用它的列。例如，如果我使用 Angular 那么代码将是

<app-table [checkboxwidth]="20"></app-table>

然后将第一列的宽度设置为checkboxwidth。