/* Переопределяем ширину контейнера */
.container {
    /* 
       По умолчанию там стоит max-width: 800px (или около того).
       Ставим 50% от ширины вьюпорта (экрана), как вы и хотели.
    */
    max-width: 50vw !important; 
}

/* 
   ВАЖНО: На мобильных устройствах 50% будет выглядеть ужасно узко.
   Поэтому добавим медиа-запрос, чтобы правило работало только на экранах шире 768px (планшеты/ноуты).
*/
@media only screen and (max-width: 768px) {
    .container {
        max-width: 90vw !important; /* На телефоне занимаем почти всё место */
    }
}

table {
    width: 100%;
    table-layout: fixed; /* Ключевой параметр: игнорирует содержимое, делит ширину поровну */
}

/* Опционально: разрешаем перенос длинных слов, чтобы они не вылезали за границы */
table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}