Установить минимальную -ширину на ширину содержимого

У меня есть div с фоном, который содержит таблицу. Я хочу, чтобы div имел ширину 100%, за исключением случаев, когда он уже, чем длина таблицы. Я могу сделать что-то вроде этого:

.my-div {
  width:100%;
  min-width:900px;
}

Это отлично подходит для таблицы шириной 900 пикселей, но если она уже, у меня будут нежелательные полосы прокрутки, а если она шире, у меня будет недоступный контент. Очевидно, что это может быть тривиально решено с помощью JavaScript, но я хочу знать, существует ли решение только для CSS -, чтобы мое приложение не было таким тяжелым для JS -.

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