How to correctly align left in CSS?


Tags: html,css

Problem :

I am creating an opening hours section and I would like to align my days on the left side of the table. I tried float: left; but my Monday gets sent a few pixels above. text-align: left; did not work, can anyone suggest a correct way I can align my days?

http://imgur.com/93TMXIp (as you can see my Monday is skewed)

CSS

 .tg  {border-collapse:collapse;border-spacing:0;}
 .tg td{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:2px 10px;overflow:hidden;word-break:normal; text-align:right;border-style: solid;border-bottom: solid #E7E7E7 1px;}
.day { float: left; }
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:2px 10px;overflow:hidden;word-break:normal; text-align:right;color:#696969;border-style: solid;border-bottom: solid #E7E7E7 1px;}
.tg .tg-57v2{background-color:#f7f7f7}

HTML

<table class="tg">
<tr>
<th class="tg-57v2"><span class="day">Monday</span></th>
<th class="tg-57v2">                           11:30am-10:00pm</th>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Tuesday</span></td>
<td class="tg-57v2">                           11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Wednesday</span></td>
<td class="tg-57v2">                           11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Thursday</span></td>
<td class="tg-57v2">                           11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Friday</span></td>
<td class="tg-57v2">                           11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Saturday</span></td>
<td class="tg-57v2">                           11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Sunday</span></td>
<td class="tg-57v2">                           11:30am-10:00pm</td>
</tr>
</table>


Solution :

Monday is styled as a th (header). If you change it to a td like the other days, it should align.


    CSS Howto..

    How to make elements stay within container?

    I want all columns() in a
    have the equal length, how to achieve this?

    Change Color Themes - How To Prevent the Site Goes Back to Default

    How can I set all columns to be the same height? [duplicate]

    How to change the opacity background color of other two buttons once we click on a single button using css

    Css radio buttons problem - How to style each radio button?

    CSS - how to align text and an image vertically?

    how to avoid from loading unnecessary javascript and css in page on codeigniter to improve the load time [closed]

    How to make a page look good printed/across multiple browsers

    How to use custom CSS with my Sharepoint WebPart?

    How to apply format depending on absence of a CSS class?

    How to change font color inside nav element?

    How to make one list-item in menu higher than the others with CSS?

    How to add media='screen' in css using cakePHP?

    How to divide a border into 4 equal parts?

    Show image when hovering on a span

    How to use css transform-origin to show a circle of playing cards (rectangles)?

    How to create border between two divs with dynamically changing heights?

    How to add label to percentage bar in css and html?

    Hide/Show table in my Email with the use of a button

    how to remove extra css and js link in twitter-bootstrap-rails

    how to center a div between another two (left and right) divs?

    How to keep line breaks when using .text() method for jQuery?

    CSS - How to make position:absolute work not on all 100% screens area

    How to have an image overlap the edge of a div

    How to fix smooth text in IE?

    Bootstrap: How to get part of my banner image to hide under my sidebar?

    How to add background video stop button

    How to display inline input in li?

    How to get the perticluar image from large set images in one image using css