CODEWITHSUNDEEP
htmljspxhtml
user2369634
user2369634

Reputation: 1017

Displaying new line without using <TR> in html page by wrapping TD tags

I need to display multiple lines in one row without using "TR" tag.

This is necessary because I am applying sortabletable.js on my JSP so when sorting rows which are to be considered as single entity then it fails.

I tried the following:

<table style="display:inline-block" width="90px">
    <tr>
        <td width="30px">1</td>
        <td width="30px">1</td>
        <td width="30px">1</td>
    </tr>


    <tr>
        <td width="30px">1</td>
        <td width="30px">1</td>
        <td width="30px">1</td>
    </tr>


    <tr>
        <td width="30px">1</td>
        <td width="30px">1</td>
        <td width="30px">1</td>

        <td width="30px">2</td>
        <td width="30px">2</td>
        <td width="30px">2</td>

        <td width="30px">3</td>
        <td width="30px">3</td>
        <td width="30px">3</td>

    </tr>

</table>

Can the TD in 3rd row be wrapped into 3 lines by restricting the row and table length?

The following code was working fine:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>
#table_id  {display: block; }
#table_id  td {display: inline-block;float:left; }
</style>


<table id="table_id" style="width:55px;table-layout:fixed" border="1">


<tr>

<td>1</td>
<td>1</td>
<td>1</td>

</tr>


<tr>

<td>1</td>
<td>1</td>
<td>1</td>

</tr>


<tr>

<td>1</td>
<td>1</td>
<td>1</td>

<td>2</td>
<td>2</td>
<td>2</td>

<td>3</td>
<td>3</td>
<td>3</td>

</tr>

</table>

Upvotes: 0

Views: 3330

Answers (1)

vp_arth
vp_arth

Reputation: 14982

Here is how you can do this with nested tables: Fiddle

<td width="30px">
  <table>
    <tr><td width="30px">3</td></tr>
    <tr><td width="30px">4</td></tr>
    <tr><td width="30px">5</td></tr>
  </table>
</td>

And here without nested tables:

<td width="30px" style="white-space: pre;">
  3
  4
  5
</td>

Fiddle

By width limiting also:

<td style="word-break:break-word;width:10px;">345</td>

Fiddle

Upvotes: 1

Related Questions