复选框表-相等的列宽

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

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

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

[如果要创建组件，并希望该组件使用各种复选框大小不同的时间，然后取第一个的宽度列从何处被调用。例如，如果我使用的是Angular那么代码将是

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

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