左对齐表头中的文本和图标

Question

在这个小提琴中http://jsfiddle.net/kralco626/t56xX/1/

请注意<th>中我周围有边框的方式可以看出一切都是正确的。我想要它离开。

还要求图标和文本不包装。满足此要求，但在修复对齐时无法解决。

有什么想法吗？

更新

注意我用红色着色的空间？在我看来，图标和标签是对齐的，而不是左对齐。我如何将整个事物对齐到左边？如果有空间我想要它在右边。

我知道在这张图片中看起来有点微不足道，但是当你添加数据并在我的情况下查看它时看起来很奇怪，标题是右对齐的，数据是左对齐的。

更新2：为了避免进一步混淆，我想要左边的图标。

更新3：简化示例：http://jsfiddle.net/kralco626/Lz4QY/1/ 如何在图标的每一侧获得1px的“白色空间”，而不是左侧的大量空间而右侧没有？

Answer 1

th {
  padding-left:0;
  padding-right:10px;
}

删除左侧的填充，并在每个填充的右侧添加任意数量的填充（空格）。

Answer 2

我不太明白你的问题，也许你想让图标显示在方框的右边？

如果是这种情况，也许你应该给那些包含图标的人一个float：right属性，而不是他们现在拥有的那个。

像这样http://jsfiddle.net/t56xX/5/。

th span span {
    float:right!important;
}

需要！important是因为截至目前，float：left属性在s中是内联的，因此在不使用important关键字的情况下它不会被新的覆盖。