Share via

How to left align the field inside

of table?

Question

Friday, February 6, 2015 10:01 PM

Hi

In my mvc view table which contains these <td>s, I want left align the field on each <td>, you can see I tried to use <td style="text-align:left;"> to achieve it, but it seems this does not work? the fields is still showing on the center of  each <td>, does anybody know how to make it working?

<td style="text-align:left;">
                         @Html.DropDownList("IRegion1")                      
                    </td>
                    <td style="text-align:left;">
                         @Html.TextBox("IAmount1","0.00", new { Class = "AmtField" })
                      
                    </td>

All replies (6)

Friday, February 6, 2015 11:20 PM âś…Answered

Good call out Peter. This is why I did not use align="". 

Check out my latest fiddle for inline and css based text-aligns

http://jsfiddle.net/qL4dkez9/4/

Friday, February 6, 2015 10:22 PM

Your code looks alright. Make sure there is nothing else in your CSS that is styling these table data elements. Use a developer tools or Firebug to inspect the css that is on a <td> and check the tree of your CSS. 

I made a fiddle showing this working. 

http://jsfiddle.net/qL4dkez9/

Friday, February 6, 2015 10:41 PM

Your code looks alright. Make sure there is nothing else in your CSS that is styling these table data elements. Use a developer tools or Firebug to inspect the css that is on a <td> and check the tree of your CSS. 

I made a fiddle showing this working. 

http://jsfiddle.net/qL4dkez9/

thanks for your quick response, but my codes have dropdown list and text field inside of <td>, yours is just plain text, I am wondering if this is different?

Friday, February 6, 2015 10:52 PM

I will check that right now. My apologies for not making it one for one. 

How about this fiddle?

http://jsfiddle.net/qL4dkez9/3/

Friday, February 6, 2015 10:57 PM

Peter Cong

<td style="text-align:left;">
                         @Html.DropDownList("IRegion1")                      
                    </td>
                    <td style="text-align:left;">
                         @Html.TextBox("IAmount1","0.00", new { Class = "AmtField" })
                      
                    </td>

Try setting the align property of your td like given below

You can try with below code

  <td align="left">
                         @Html.DropDownList("IRegion1")                       
                    </td>
                    <td align="left">
                         @Html.TextBox("IAmount1","0.00", new { Class = "AmtField" })
                       
                    </td>

Friday, February 6, 2015 11:11 PM

Peter Cong

<td style="text-align:left;">
                         @Html.DropDownList("IRegion1")                      
                    </td>
                    <td style="text-align:left;">
                         @Html.TextBox("IAmount1","0.00", new { Class = "AmtField" })
                      
                    </td>

Try setting the align property of your td like given below

You can try with below code

  <td align="left">
                         @Html.DropDownList("IRegion1")                       
                    </td>
                    <td align="left">
                         @Html.TextBox("IAmount1","0.00", new { Class = "AmtField" })
                       
                    </td>

if you googled it, you should find that "The align attribute of <td> is not supported in HTML5. Use CSS instead."

and I tried it, it does not work, so I have to use .css to achieve it. any idea?

  • Last updated on