Блог

У меня есть таблица со следующими требованиями:

1. Текст в столбцах не должен обтекаться, а переполнение должно быть скрыто.
2. Строки, расположенные ниже таблицы, должны быть скрыты.
3. Столбцы можно добавлять во время выполнения.

Я добавил здесь третье требование, потому что я ожидаю, что оно сужает возможности решений.

Любая помощь будет признательна.

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

В качестве решения вы можете добавить display: block; свойство в <table> тег.

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