Центрирование таблицы с выравниванием текста по центру ⇐ Html

[Anonymous]

Я хочу центрировать таблицу, но хотя технически она центрирована, из-за разной длины содержимого td справа в таблице остается пустое место.

Код: Выделить всё

.wrap {
background: pink;
padding: 0 50px;
}

table {
margin: 0 auto;
text-align: center;
width: 100%;
tr {
td {
padding: 10px;
text-align: left;
}
}
}

Код: Выделить всё

something here
row 1 col 2 my 


row 2 col 1 hello world
react.js

Я могу сделать таблицу и td выровненной по центру, но из-за разной длины содержимого td оно будет выглядеть неравномерным.

Код: Выделить всё

.wrap {
background: pink;
padding: 0 50px;
}

table {
margin: 0 auto;
text-align: center;
width: 100%;
tr {
td {
padding: 10px;
}
}
}

Код: Выделить всё

something here
row 1 col 2 my 


row 2 col 1 hello world
react.js

Я хочу, чтобы содержимое td было выровнено по левому краю и выглядело по центру внутри оболочки, как метки на этом изображении (т. е. Камера 1, Камера 2 и т. д.):