display: table-cell; には colspan, rowspan 的な指定ができない

table-cell を指定した要素に display: table; の要素を入れ子にするしかないのか

<div class="table">
    <div class="tr">
        <div class="td">なにかkey</div>
        <div class="td">なにかvalue</div>
    </div>
    <div class="tr">
        <div class="td">
            なにかkey2
        </div>
        <div class="td">
            <div class="table--nested">
                <div class="tr">
                    <div class="td">なにかvalue2-1</div>
                </div>
                <div class="tr">
                    <div class="td">なにかvalue2-2</div>
                </div>
            </div>
        </div>
    </div>
</div>

.table {
    display: table;
    border-collapse: collapse;
}

.tr {
    display: table-row;
}

.td {
    display: table-cell;
    padding: 10px;
    border: 1px solid #666;
    vertical-align: middle;
}

.table--nested {
    display: table;    
}

.table--nested .td {
    padding: 0;
    border: none;
}