DOM表按行不同的列宽

Question

是否可以允许单个表逐行显示动态列宽？

我拥有的以及我想要实现的目标的例子：

https://jsfiddle.net/s33c8n7m/1/

td {
  border: solid !important;
  border-width: 1px 1px !important;
  border-color: #808080 !important;
}

<table style="border-collapse: collapse" width="100%">
  <tbody>
    <tr>
      <td style="font-weight: bold;">Test Short:</td>
      <td style="text-align: right;">Test text</td>
    </tr>
    <tr>
      <td style="font-weight: bold;">TEST VERY LOOO O OOOO OOOO OOOO OONG:</td>
      <td style="text-align: right;">test text</td>
    </tr>
  </tbody>
</table>
<br><br><br>
<b>Desired:</b>
<table style="border-collapse: collapse" width="100%">
  <tbody>
    <tr>
      <td style="table-layout:fixed; font-weight: bold;">Test Short:</td>
      <td style="text-align: right;">Test text</td>
    </tr>
  </tbody>
</table>
<table style="border-collapse: collapse" width="100%">
  <tbody>
    <tr>
      <td style="table-layout:fixed; font-weight: bold;">TEST VERY LOOO O OOOO OOOO OOOO OONG::</td>
      <td style="text-align: right;">test text</td>
    </tr>
  </tbody>
</table>

调整显示宽度以查看每行的列宽如何独立更改。

但我需要一种方法来使用单个表格。