Justify text in table cells

Question

I have a Table with 2 columns.I would like to be able to justify text in each cell so i used text-align:justify; for each <td> tag,but it does not seem to work?

Html Code:

<table >
<tr >
<td  class=tblcellA>سرآغاز گفتار نام خداست </td>
<td  class=tblcellB>كه رحمتگر و مهربان خلق راست</td>   
</tr>
<tr >
<td  class=tblcellA>ستايش بود ويژه كردگار</td>
<td  class=tblcellB>كه بر عالمين است پروردگار</td>   
</tr>
</table>

Css Code:

body
{
   overflow:hidden;
   font-family:tahoma;
   FONT-SIZE:15px;
direction:rtl;
}
.tblcellA
{
    BORDER-RIGHT: #7e975b 1px solid;
    BORDER-TOP: #7e975b 1px solid;
    BORDER-LEFT: #7e975b 1px solid;
    BORDER-BOTTOM: #7e975b 1px solid;

   text-align:justify;
   padding-right:18px;
    width:230px;

}
.tblcellB
{
    BORDER-RIGHT: #7e975b 1px solid;
    BORDER-TOP: #7e975b 1px solid;
    BORDER-LEFT: #7e975b 1px solid;
    BORDER-BOTTOM: #7e975b 1px solid;

   width:230px;
   text-align:justify;
   padding-right:18px;
}

Result: http://jsfiddle.net/d5VTg/22/

How can I justify this line of text? ​ ​

Answer 1

You have fixed the width of the each cell so that you are able see the extra white space. Otherwise your text is justified.

In this case change the width properties like this

width:auto;
max-width:230px;

Now the cell max width will be 230px

DEMO HERE