Html – How to make HTML table cell to flow below other cells in the same row

csshtml

I have a table in which I need to add another cell per column, and since that column will have a lot of elements on it, the cell content must flow below the other cells in the same row, filling all the available width on the table. This way the columns won't be stretched making it impossible to view its content.

A visual example might help: http://www.asciiflow.com/#Draw9009157520507047228

Edit

After reading all the replies I realize that perhaps I didn't provide enough information. My apologies.

The table I want to modify is the one in http://staging.locamotion.org/projects/pootle/ . Note that this table uses the sorttable JavaScript library for sorting the table.

I have to modify that table to display tagging information for each of the entries. Since every entry can have several tags which can span a lot of space, the new column (necessary to keep working the sorting library) must flow below the other columns to allow showing the tagging stuff which can span to one or more lines due to width constraints (have in mind that this program is used on third world countries will old equipment and low resolution screens).

Someone asked what I've tried. I tried adding an additional row per each entry, which only one cell with colspan attribute, but that way the sorting library doesn't work:

<table class="sortable">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>  
            <th>Col 3</th>  
            <th>Col 4</th>                   
        </tr>
    </thead>
    <tbody>
        <tr class="even">
            <td>1</td>
            <td>2</td>  
            <td>3</td>  
            <td>4</td>                   
        </tr>
        <tr class="even">
            <td colspan="4">First entry tagging stuff</td>
        </tr>
        <tr class="odd">
            <td>5</td>
            <td>6</td>  
            <td>7</td>  
            <td>8</td>                   
        </tr>
        <tr class="odd">
            <td colspan="4">Second entry tagging stuff</td>
        </tr>
        <!-- More and more entries -->
    </tbody>
</table>

If you have any other idea on how this UI can be achieved while keeping column ordering I would appreciate it.

I want to apologize again, and also thank the people who spent some of their time trying to answer and help me the best they could.

Best Solution

Tables cells are ALWAYS rectangles and cannot "flow" as described in your image.

You would need to nest a table in a DIV and use CSS floats to accomplish what you're looking for.