当父也是显示表时，子表详细信息应该像独立表一样工作

Question

这是我的桌子，我使用显示表制作了我的桌子。 我的问题是当我渲染这个HTML子表时发生在父表的第一个单元格中，它看起来很奇怪。我应该使用什么CSS来防止？

    <div style="display:table;width:100%">
        <div style="display:table-row">
            <span style="display:table-cell">state</span>
            <span style="display:table-cell">Country</span>
            <span style="display:table-cell">Pin Code</span>
        </div>
        <div style="display:table-row">
            <span style="display:table-cell;">JH</span>
            <span style="display:table-cell;">Jfjkfjf</span>
            <span style="display:table-cell;">831001</span>
        </div>
        <div style="display:table;width:100%;">
            <div style="display:table-row">
                <span style="display:table-cell">Contact ID</span>
                <span style="display:table-cell">Contact Name</span>
            </div>
            <div style="display:table-row">
                <span style="display:table-cell;">1</span>
                <span style="display:table-cell;">jkjkjgkjgkjgk</span>
            </div>
        </div>
        <div style="display:table-row">
            <span style="display:table-cell;">JH</span>
            <span style="display:table-cell;">Jfjkfjf</span>
            <span style="display:table-cell;">831001</span>
        </div>
    </div>