使用HTML和CSS在一行上的标题间距不均匀

我想在一行上不均匀地将表单上方的标题隔开，但不确定使用HTML和CSS的最佳方式是什么。我过去使用过span标记和填充，但在不同的浏览器中效果不同，不能正确对齐。我确信有一种更好的方法可以将所有的标题包装在span标记中。非常感谢你的帮助。我已经附上了我想要实现的目标的图像。

如果使用表格，单元格将根据其中的内容自动调整大小。当纯粹处理表格数据时，表格仍然很有用。或者，您可以为每个标题单元格指定一个类来设置特定的宽度

<table cellpadding="5" cellspacing="5" width="100%">

<tr>

    <td>one</td>
    <td>this one needs more space and will grow</td>
    <td>this guy isn't as long</td>
    <td>short</td>

</tr>

一
这一个需要更多的空间，并将增长
这家伙没那么长
短的

​

---

JSFiddle上的示例：

到目前为止，您都做了些什么？您可以使用
标记。我还没有开始使用HTML，因为我正在寻找最好的策略。
标记将打断该行。我需要将“卡片类型”“数量”“颜色”适当隔开，我不确定如何进行此操作。感谢此操作非常有效，我以前从未使用过表格，但这正是我想要的。