left align text and icon in table header [closed]

开发者_StackOverflow中文版 It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 11 years ago.

in this fiddle http://jsfiddle.net/kralco626/t56xX/1/

notice how in the <th> that I have a border around you can see that everything is pushed right. I want it left.

It is also a requirement that the icon and the text don't wrap. This requirement is met, but cannot be broken when fixing the alignment.

Any ideas?

Update:

Notice the space I colored in red? It seems to me that the icon and label are aligned right, rather than left. How man I align the whole thing to the left? If there is space I want it on the right.

I know it seems kinda of trivial in this picture, but when you add data and look at it in my situation is looks odd that the headers are right aligned and the data is left aligned.

Update 2: Just to avoid further confusion, I want the icon on the left.

Update 3: simplified example here: http://jsfiddle.net/kralco626/Lz4QY/1/ How would I get like 1px of "white space" on each side of the icon rather than lots of space on the left and none on the right?

---

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

Remove the padding to the left and add whatever amount of padding (space) you want to the right of each th.

---

I don't quite understand your problem, maybe you want the icon to appear right of the boxes?

If this is the case, maybe you should give those containing the icon a float:right property, instead of the left one they have now.

Something like this http://jsfiddle.net/t56xX/5/.

th span span {
    float:right!important;
}

The !important is needed because as of now, the float:left property is inline in the s, so it won't get overwritten by the new one without using the important keyword.