Проблемы с выравниванием преобразований CSS3 внутри таблицы

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

Есть несколько проблем, которые я не могу исправить.

1. Текст столбца 07 перетекает в столбец 08.
   • Я не могу исправить это с помощью overflow: hidden; потому что мне нужно установить ширину и высоту как 200 пикселей, чтобы получить правильную форму.
2. Мне нужно установить ширину и высоту повернутого текста, что не делает его очень гибким для работы, и это также вызывает проблему номер 1.
3. Мне нужно установить поле на «0 -100 пикселей», потому что Я должен установить ширину на 200 пикселей, но после поворота его ширина по-прежнему будет 200 пикселей, что сделало бы таблицу невероятно большой.
4. Если изменить размер шрифта, он больше не будет хорошо помещаться в столбцах.
5. Шрифты выглядят ужасно, их трудно читать. Я полагаю, что это сработает само по себе в будущих обновлениях браузеров.

Вот его jsFiddle в действии

http://jsfiddle.net/CoryMathews/ZWBHS/

Мне нужно, чтобы он работал, и я довел его до той же точки в IE7 +, Chrome, FF и Опера.

Есть идеи, как улучшить этот метод, сделав его действительно пригодным для использования? Вот некоторые из моих идей:

1. Я мог бы вычислить ширину, высоту и т.д. с помощью некоторого javascript при загрузке страницы, это решило бы проблемы 2 и 3 выше, но не 1.Однако я ненавижу полагаться на javascript для отображения.

2. Возможно, я неправильно использую трансформацию происхождения, которая дала бы мне лучший контроль. Число, которое я сейчас использую "0 0", позволяет мне легко рассчитать необходимые размеры.