I have a table with the following requirements:

1. Text in columns should not wrap and overflow should be hidden.

2. Rows that extend below the table should be hidden.

3. 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>

CodePudding user response：

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;
}