CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vishrant
Vishrant

Reputation: 16628

Multiple TD after some TD move to new line

Hi I am generating a table dynamically and adding new TR and TD to it dynamically in the following manner.

$('#tableId').append('<tr><th colspan="2"></th>');

The above code is called only once in my code.

Then I am adding TD to it in the following manner:

var tempurl = 'http://google.com';
$('<td>').appendTo($('#tableId')).html("<a href='"+tempurl+"'>"+tempurl+"</a>");

The problem that I am facing is, all TD are getting aligned in one row(in the same line only) and my page width get increased by many times.

I tried adding css to table so that if table size exceed TD should go to next line:

max-width: 90%;
display: block;

and

display: inline;

but it is not working out for me.

Upvotes: 0

Views: 1032

Answers (1)

FelipeAls
FelipeAls

Reputation: 22161

Please code a correct static HTML table and then use this code to generate dynamically a still correct table.

Here's an example of such a table:

<table>
    <caption>Google results</caption>
    <thead>
        <tr>
            <th scope="col">Title and link</th>
            <th scope="col">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <a href="http://domain.com/1">Stack Overflow</a>
            </td>
            <td>Stack Overflow is a website (...)</td>
        </tr>
        <tr>
            <td>
                <a href="http://domain.com/2">Stack Exchange</a>
            </td>
            <td>Stack Exchange is a website (...)</td>
        </tr>
    </tbody>
</table>
  • no need for a header cell spanning all rows: you probably intend it as a caption
  • in a vertical table, you should have a header cell (th) on top of each column, in thead element (I added scope="col" attribute for accessibility reasons. It'd be row if header cells were on left of each row. Don't use scope if you've colspan or rowspan somewhere)
  • in tbody element, one row (tr) per actual row
  • in each row, as many td elements as there are header cells (except if there are some colspan or rowspan)

EDIT: why do you have 2 different id? Confusing.

Upvotes: 1

Related Questions