CODEWITHSUNDEEP
htmlcss
user1929687
user1929687

Reputation: 67

Enter tds in multiple lines which are all inside a single tr

Hi every one, I need to enter td values in multiple lines which are all inside a single tr. I tried like this but could not achieve it.

<table class="table">
<tr style="margin-bottom:10px;border:5px solid lightgrey;width:700px">
<td style="width:500px">.... </td>
<td style="width:300px">.... </td>
<td style="width:500px">.... </td>
</tr>
</table>

I thought that because of the mentioned width for tds it will wrap to the next line but it was not. Even after increasing the td width beyond 700px i could not get the expected output.

How to fix this?

Upvotes: 3

Views: 13782

Answers (3)

Michael Law
Michael Law

Reputation: 301

Do you mean like this....

td1
td2
td3

if, why don't you use 

<table>
    <tr>
        <td>TD1</td>
    </tr>
    <tr>
        <td>TD2</td>
    </tr>
</table>

OR if you want to group tds in one tr

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td>TD1</td>
                </tr>
                <tr>
                    <td>TD2</td>
                </tr>
                <tr>
                    <td>TD3</td>
                </tr>
            </table>
        </td>
    <tr>
<table>

BTW, if this is not a must to use td for the tds information, you may try this:

<table>
    <tr>
        <td>
            TD1 information<br/>
            TD2 information<br/>
            TD3 information<br/>
        </td>
    <tr>
<table>

Upvotes: 1

Paul Aldred-Bann
Paul Aldred-Bann

Reputation: 6020

Set your TD elements to display: block; which will force them onto new lines:

​.table td { display: block; }​

Example: jsFiddle

Upvotes: 5

Ladineko
Ladineko

Reputation: 1981

Use for the first line :

table tr td:nth-child(1)
{
  background-color:red;
}

Use for the second line :

table tr td:nth-child(2)
{
  background-color:yellow;
}

ect.

To support IE 7 & 8 you need to use :

td:first-child + td

for the first second line

td:first-child + td + td

for the 3rd.

ect.

to support IE6 you need to use Javascript.

$(function() {
    $('td:first-child').addClass("Class1");
    $(".table-class tr").each(function() {
        $(this).find('td:eq(1)').addClass("Class2");
        $(this).find('td:eq(2)').addClass("Class3");
    });
});

This will add a class that you can call

Upvotes: 0

Related Questions