Hi all,

I hope I posted this in the right section.

Anyhow, I'm having an issue trying to created a specific HTML table layout.

To help explain, here's a quick "sketch" of what I'm trying to get out of the table:

+-----+-----+-----+
|     |     |     |  <- header cells
+-----+-----+-----+
|     |     |     | <- data cells
+-----+-----+-----+
|     |     |     | <- data cells
+-----+-----+-----+

Current, I have it setup where the "data cells" section of the table is a nested table.

Basically, I'm trying to make an "overflow" with the data cells to where it will allow a user to scroll through the data cells without the header cells scrolling with the data cells. I've had no luck thus far

I hope what I'm trying to get across is understandable. Either way, any input is highly appreciated.

Recommended Answers

All 3 Replies

So what u want to do is not let the header cells to stretch if u stretch the web page? or do u want the header cells to remain a constant size with the data cells stretching depending on the amount of data within those cells?

Hmm, not quite but close.

Here's a generic piece of code for the table I tried sketching above:

<table>
    <tr>
        <th>Header #1</th>
        <th>Header #2</th>
        <th>Header #3</th>
    </tr>
    <tr>
        <td style="overflow:scroll">
            <table>
                <tr>
                    <td>Data Cell #1</td>
                    <td>Data Cell #2</td>
                    <td>Data Cell #3</td>
                </tr>
                <tr>
                    <td>Data Cell #4</td>
                    <td>Data Cell #5</td>
                    <td>Data Cell #6</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

So as you can see, I'm trying to make the contents of the table cell that has the overflow style assigned to it scroll when it overflows. I hope this helps explain what I'm trying to achieve.

Thanks.

Bah! turns out the method I was trying to achieve was inefficient and bulky. I just ended up splitting up the tables and using an iframes.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.