Как сделать так, чтобы ширина двух столбцов соответствовала их содержанию, а ширина трех столбцов равномерно делила оставшееся пространство в таблице?

Question

У меня есть таблица с 5 столбцами, 2 содержат кнопки, содержащие переводимый текст, а остальные 3 содержат URL-адреса. Мне нужно, чтобы столбцы из двух кнопок соответствовали их содержанию, а остальные три столбца - чтобы разделить оставшееся горизонтальное пространство с очень длинными данными, разбитыми на несколько строк текста.

Также для меня доступно Bootstrap.

Прямо сейчас я использую (безуспешно):

table {
    table-layout: fixed;
}

th.dataColumn, td.dataColumn {
    width: auto;
    word-wrap: break-word;
}

th.buttonColumn, td.buttonColumn {
    width: 1%;
    white-space: nowrap;
}

Когда я удаляю «table-layout: fixed» из моего CSS файла, таблица становится шире, чем предполагалось содержать.

Answer 1

Я понял это самостоятельно:

th.mainColumn, td.mainColumn {
  width: 32%;
  max-width: 1px;
  word-wrap: break-word;
}

th.buttonColumn, td.buttonColumn {
  white-space: nowrap;
  width: 2%;
}