CODEWITHSUNDEEP
htmlcss
SivaRajini
SivaRajini

Reputation: 7375

dynamic content table alignment properly

Please refer below code

<table align="center" class="section">
    <tr>
        <td>Name</td>
        <td>Ram</td>
    <tr>
        <td>Age</td>
        <td>20</td>
    </tr>
    <tr>
        <td> Reason </td>
        <td>  xxx </td>
        <td> yyyy </td>
        <td>.....</td>
        .....................
    </tr>
</table>

fiddle link : http://jsfiddle.net/WKgu4/

Current output :

Name     Ram
Age      20
Reason   xxx     yyyy

Reason tr will have "n" number of td,that means dynamic content will be added as required so if any td added in reason tr i want output like below

Expected Output:

Name     Ram
Age      20
Reason   xxx
         yyyy
         zzzz
         ccccc
         vvvvvv

how to align the reason tr ? because it has dynamic content. "n" number of reasons added dynamically. but i want to align like above table

Css :

.section tr td
{
    padding: 10px;
}

need to align the dynamic content of reason in one by one.

how to resolve this ?

Upvotes: 1

Views: 82

Answers (5)

Alex
Alex

Reputation: 9041

Not entirly sure why you'd want to do this, but you can do it with CSS3:

tr:nth-child(3) td:not(:nth-child(1)) {display:table-row;}
tr:nth-child(3) td:nth-child(1) {vertical-align:top;}

Check out the fiddle - http://jsfiddle.net/fwnHG/

Also, this fiddle uses <th> so it's a bit more semantically correct - http://jsfiddle.net/ZB2Gn/

Upvotes: 1

Zivko
Zivko

Reputation: 377

Why dont you put all reasons in 2nd TD break apart with BR tag like 

<tr>
  <td> Reason </td>
  <td> xxx
       <br />yyyy
       ...
  </td>
</tr>

and add in CSS

.section tr td
{
  padding: 10px;
  vertical-align: top;
}

Upvotes: 1

Zword
Zword

Reputation: 6787

If you dont want to change HTML try below CSS:

.section tr:last-child{
    vertical-align:top;
}
.section tr td
{
    padding: 10px;
}
.section tr:last-child>td~td{
    display:table-row;
}

Demo Fiddle

Upvotes: 2

Tushar
Tushar

Reputation: 4418

you need to repeat <tr> for having above output.

what you can do is 

<table align="center" class="section">
      <tr>
        <td>Name</td>
        <td>Ram</td>
      <tr>
        <td>Age</td>
        <td>20</td>
      </tr>
      <tr>
          <td> Reason </td>
          <td>  xxx </td>
      </tr>
<!- repeating part-->
       <tr>
          <td></td>
          <td> yyy</td>
      </tr>
       <tr>
          <td></td>
          <td> zzz</td>
      </tr>
------
</table>

Upvotes: 1

Francis Delgado
Francis Delgado

Reputation: 37

<table align="center" class="section">
  <tr>
<td>  Name
</td>
<td>
Ram
</td>
      <tr>
          <td>
              Age
          </td>
          <td>
              20
          </td>
      </tr>
         <td> Reason </td>
         <td>  xxx </td>
      <tr>
      <tr>
         <td></td><td> yyyy </td>
      </tr>
      </tr>
    </table>

?

Upvotes: 0

Related Questions