Clever Geek Handbook

How to limit the number of items in a table row?

The table shows a large number of items per line, so it goes off-screen. I tried adding CSS styling to change the width of the table but didn't work.

I was thinking about putting the break line after a certain number (perhaps using JQuery) of elements, while I create each line in an iterative fashion. Is there a way to determine the number of elements created dynamically in each row of the table?

Thank,

+3


source to share


1 answer


You have to change the width of the table header, the child row / td inherits from this size as follows:

<table>
    <thead>
        <tr>
            <th width="20%">Column 1</th>
            <th width="20%">Column 2</th>
            <th width="20%">Column 3</th>
            <th width="20%">Column 4</th>
            <th width="20%">Column 5</th>
    </thead>
    <tbody>
        <tr>
            <td>Data column 1</td>
            <td>Data column 2</td>
            <td>Data column 3</td>
            <td>Data column 4</td>
            <td>Data column 5</td>
        </tr>
    </tbody>
</table>


Note: You must have the same number of columns in both <thead>

, and in<tbody>

+1


source






More articles:


All Articles