Проблемы с преобразованием CSS3 внутри таблицы - PullRequest
Новая
       2

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

9 голосов
/ 25 февраля 2012

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

CSS3 rotated text within a table

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

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

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

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

Iнужно, чтобы он работал и дошел до того же уровня в IE7 +, Chrome, FF и Opera.

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

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

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

Ответы [ 4 ]

7 голосов
/ 29 февраля 2012

Это решение устраняет некоторые из ваших проблем, но оно не идеально:

  1. Используйте whitespace: nowrap, чтобы отключить вывод текста на следующую строку.
  2. Обернуть содержимое каждой ячейкив контейнере с width: 1em.Столбцы всегда достаточно широки для 1 строки вертикального текста.Вы можете свободно регулировать размер шрифта.

  3. Вручную установите высоту таблицы для полного отображения повернутого содержимого (на -90 градусов).Высота жесткого кодирования невелика, но есть и преимущества: нет необходимости в фиксированной ширине и отрицательных полях для противодействия фиксированной ширине / трансформации происхождения / относительного позиционирования / JavaScript;текст автоматически привязывается к нижней части столбца.

  4. См. 2.

  5. Рекомендуются шрифты без засечек.Чем менее детализированы шрифты, тем лучше они выглядят после преобразований.

Это работает в Firefox, Chrome, Opera, IE9 +.Вертикальный текст не работает в IE8 и более ранних версиях.Я попытался повернуть таблицу, используя: 

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)

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

body {
    font-family: sans-serif;
    padding: 10px;
    font-size: 12px;
}

td, tr, th, table { border: 1px solid #333; }
td:nth-child(odd) { background: #eee; }
td {
    overflow: hidden;
    white-space: nowrap; /* text on one line only */
    vertical-align: bottom;
    height: 300px; /* to be adjusted: column is not always tall enough for text */
}

td > div {
    padding: 10px;
    width: 1em; /* column is always wide enough for text */
}

td > div > div {
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg) !important;
    transform: rotate(-90deg);
}
<!--[if LT IE 9]>
    <style>
        table { width: 100px; }
        td {
            white-space: normal;
            vertical-align: baseline;
            height: auto;
        }
        td > div {
            width: auto;
        }
    </style>
<![endif]-->
<table>
    <tr>
        <th>01</th>
        <th>02</th>
        <th>03</th>
        <th>04</th>
        <th>05</th>
        <th>06</th>
        <th>07</th>
        <th>08</th>
        <th>09</th>
        <th>10</th>
        <th>11</th>
        <th>12</th>
    </tr>
    <tr>
        <td><div><div>Report Results 1</div></div></td>
        <td><div><div>Shinanigans</div></div></td>
        <td><div><div>CSS Transforms Suck</div></div></td>
        <td><div><div>Lorem Ipsum</div></div></td>
        <td><div><div>So Damn Pixelated</div></div></td>
        <td><div><div>This font looks Terrible</div></div></td>
        <td><div><div>Too Long to read on 1 line Set dimensions suck</div></div></td>
        <td><div><div>Grumble Grumble.</div></div></td>
        <td><div><div>Homebrew!</div></div></td>
        <td><div><div>Spotify Commercial Suck</div></div></td>
        <td><div><div>Grooveshark FTW!</div></div></td>
        <td><div><div>Beer time yet?</div></div></td>
    </tr>
</table>
3 голосов
/ 25 февраля 2012

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

http://jsfiddle.net/G93KE/

Я понятия не имею, работает ли это с фильтрами IE7-8.

1 голос
/ 03 марта 2012

Сначала давайте исправим перекрывающийся текст: тд {Пробельные: Nowrap;}

CSS-преобразования в некотором роде несколько похожи на «position: относительный», они изменяют рендеринг объекта, а не его положение в потоке. Это означает, что в настоящее время нет способа динамически регулировать высоту ячейки на основе ширины div (по крайней мере, пока не начнут реализовываться выражения css).

Имея это в виду, мы теперь можем свободно выводить div из потока, сколько захотим. Я собираюсь пойти и установить его в верхнем левом углу родительской ячейки. Будучи обученным профессионалом, я имею право делать это: тд {позиция: относительная;} тд> DIV {позицию: абсолютная; сверху: 0; слева: 0;}

Хорошо, посмотрите на это, теперь все содержимое ячейки смещено вверх. Мы не можем просто отрегулировать положение блока, так как это повлияет на его преобразование; вместо этого мы отрегулируем смещение блока: маржа: 100% 0 -100%;

Мы вынули элемент из потока выше (и по уважительной причине тоже), теперь мы просто применим высоту к родительской ячейке, и мы готовы пойти:

http://jsfiddle.net/ZWBHS/2/

Обновление:

Вы всегда можете добавить свойство переполнения текста и исправить размер текста и ячейки так, чтобы он требовал минимального рабочего обновления, например http://jsfiddle.net/ZWBHS/3/

Чтобы усеченный текст не терялся, возможно, добавьте атрибут заголовка, дублирующий его?

1 голос
/ 25 февраля 2012

как Duopixel, (без поворота) 

<style>

body { font-family: "Times New Roman", Times, serif; padding:10px; }
td, tr, th, table { border:1px solid #333; }
td:nth-child(odd) { background:#eee; } /* No IE, No Cares */

td.title { width:200px; }

table {       
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg) !important;
    transform: rotate(-90deg);
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    background-color:transparent;

    width:250px; 

    position:relative;
    top:250px;
  }

td > div {       
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg) !important;
    transform: rotate(90deg);
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    background-color:transparent;

    position:relative; /*Needed to position in the correct columns*/
    height:20px; /* Need to not set this, needed for columns to fill*/
    left:20px; /*Needed to line up, .5 of width - padding*/
}

</style>

<!--[if LT IE 9]>
    <style>
        table {
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            top:0px;
        }
        td div { /* ah..? didn't action of filter..? by td > div..? */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            overflow:hidden;
            width:20px; /* fix to number.. */
            height:20px; /* fix to number.. */
        }
    </style>
<![endif]-->
<table>
    <tr>
        <td class=title >Report Results 1</td>
        <td><div>01</div></td>
    </tr>
    <tr>
        <td class=title >Shinanigans</td>
        <td><div>02</div></td>
    </tr>
    <tr>
        <td class=title >CSS Transforms Suck</td>
        <td><div>03</div></td>
    </tr>
    <tr>
        <td class=title >Lorem Ipsum</td>
        <td><div>04</div></td>
    </tr>
    <tr>
        <td class=title >So Damn Pixelated</td>
        <td><div>05</div></td>
    </tr>
    <tr>
        <td class=title >This font looks Terrible</td>
        <td><div>06</div></td>
    </tr>
    <tr>
        <td class=title >Too Long to read on 1 line Set dimensions suck</td>
        <td><div>07</div></td>
    </tr>
    <tr>
        <td class=title >Grumble Grumble.</td>
        <td><div>08</div></td>
    </tr>
    <tr>
        <td class=title >Homebrew!</td>
        <td><div>09</div></td>
    </tr>
    <tr>
        <td class=title >Spotify Commercial Suck</td>
        <td><div>10</div></td>
    </tr>
    <tr>
        <td class=title >Grooveshark FTW!</td>
        <td><div>11</div></td>
    </tr>
    <tr>
        <td class=title >Beer time yet?</td>
        <td><div>12</div></td>
    </tr>
</table>
...