Overflow Issues with Table

Question

I have a table with the following requirements:

Text in columns should not wrap and overflow should be hidden.
Rows that extend below the table should be hidden.
Columns can be added at run-time.

I added the third requirement here because I expect it narrows the solutions.

Any assistance would be appreciated.

<style>
    #container {
        position:absolute;
        width:400px;
        height:200px;
        display: inline-block;
        font: 16px arial;
        border: 1px solid steelblue;
        background-color: lightgoldenrodyellow;
    }



    .orderCell {
        display:inline-block;
        width: 65px;
        text-align:right;
    }


    table {
        border: none;
        overflow: hidden;
        width: 100%;
        cursor: pointer;
    }


    tbody {
        border: none;
        overflow: hidden;
        cursor: pointer;
        background-color:red;
        width:100%;
        height:100%;
    }

    .textCell {
        white-space:nowrap;
        overflow:hidden;
        background-color:yellow;
    }

</style>

<div id="container">
    <table>
        <thead>
            <tr>
                <td class="orderCell">
                    Col 1
                </td>
                <td>
                    Col 2
                </td>
            </tr>

        </thead>
        <tbody>
            <tr>
                <td class="orderCell">
                    1
                </td>
                <td class="textCell">
                    Data col 2. I want horizontal overflow to be hidden. If this is in a row that extends below the table, I want the entire row to be hidden.
                </td>
            </tr>
            <tr>
                <td class="orderCell">
                    2
                </td>
                <td class="textCell">
                    Data col 2
                </td>
            </tr>
        </tbody>
    </table>
</div>

Hm. I have no idea why but it worked. If you post your solution as an answer here I'll accept it. Thanks! — Len White
– Len White, Commented Oct 11, 2021 at 13:43

Anton · Accepted Answer · 2021-10-11 13:58:27Z

2

As a solution you can add display: block; property to the <table> tag.

table {
 display: block; /* new line */
 border: none;
 overflow: hidden;
 width: 100%;
 cursor: pointer;
}

answered Oct 11, 2021 at 13:58

Anton

8,6281 gold badge15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Overflow Issues with Table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related