CODEWITHSUNDEEP
htmljsphtml-table
Vijay
Vijay

Reputation: 8461

How to align a td text to the left of the table

I have created a table in JSP file to look like this:

JSP Code:

<table style="width: 832px;" >
    <tr>
        <td style="width: 45px;text-align: left;" align="left"><%=episodeDate %></td>
        <td style="width: 7px;">&nbsp;</td>
        <td style="width: 257px;text-align: left;" ><%=careprovidername %></td>
        <td style="width: 7px;">&nbsp;</td>
        <td style="width: 260px;text-align: left;" ><%=docatorname %></td>
        <td style="width: 6px;">&nbsp;</td>
        <td style="width: 250px;text-align: left;"><%=purposeType %></td>
    </tr>
</table>

But what I get is display in the below image.

Table

My problem is that the 5th and 7th td data are not shown well aligned. What is wrong with this code?

Upvotes: 1

Views: 25180

Answers (2)

Vijay
Vijay

Reputation: 8461

Thanks to Gintas K's comment, I solved this problem by adding table-layout: fixed; to the styles for my <table>.

Upvotes: 0

AngelWarrior
AngelWarrior

Reputation: 1390

In your JSP, you should be looping inside one table. By your code, it would seem that you are re-setting the values of your variables outside the visible code. If so, you are generating multiple 1 row tables. The fix then would be to set your java variables inside the < table > ... < / table > tags, creating just new TRs and TDs for each java object.

With a single table, your TDs should all align as you wished.

<table style="width: 832px;" >
<%
MyObject o; // which has those variables
for (int i=0; i<array_size; ++i){
    o = array[i]; %>
    <tr>
        <td style="width: 45px;text-align: left;" align="left"><%= o.getEpisodeDate() %></td>
        <td style="width: 7px;">&nbsp;</td>
        <td style="width: 257px;text-align: left;" ><%= o.getCareproviderName() %></td>
        <td style="width: 7px;">&nbsp;</td>
        <td style="width: 260px;text-align: left;" ><%= o.getDocatorName() %></td>
        <td style="width: 6px;">&nbsp;</td>
        <td style="width: 250px;text-align: left;"><%= o.getPurposeType() %></td>
    </tr>
<% } %>
</table>

The idea here is to have:

<table>
    <tr> <td></td>*7 </tr>
    <tr> <td></td>*7 </tr>
    <tr> <td></td>*7 </tr>
    <tr> <td></td>*7 </tr>
    <tr> <td></td>*7 </tr>
    <tr> <td></td>*7 </tr>
</table>

So the loop where you set the java variable values has to be inside the < table> ... < /table> tags, not before.

Upvotes: 2

Related Questions