html - Why td of table loose their width inside a div (for scrolling table)

Question

I am working on a table with horizontal and vertical scrolling with fixed header, footer, left and right columns. I am near to solution but there is problem with some style.

Problem I use Div and put table inside it with fixed width and overflow hidden. But when I apply width and overflow property to div, the TDs of table inside div loose their own width. Here is what I want to try

<div id="scroll-table">
        <div class="row2 col2"><!-- it is center of my table with more data-->
            <table>
                <tr>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                    <td>N</td>
                </tr>
            </table>
        </div>
</div>

//style//

        * {
            background:rgba(0,0,0,.1);
        }

        .row2.col2 {
            width:200px;
            overflow:hidden;
        }

        table td {
            width:50px;

        }

I also play with position but no success. Can you explain me how to get width of TDs (not with padding). May be it is partially duplicate of some questions but I found all unrelated.

Answer 1

得到了解决方案。我必须给桌子本身提供宽度，所以 TD 认为有很大的扩展空间。

table {
    width:(no. of TDs * Width of single td);
}
table td {
    width:(width of td);
}