Как правильно создать css table?

вопрос

Приветствую!

Есть таблица, которую можно увидеть здесь (Зашла в аккаунт, что дальше?)

так вот
как сделать тайтлы вертикальными слева?

html


<div class="CSSTableGenerator" >
                <table >
                    <tr>
                        <td>
                            Title 1
                        </td>
                        <td >
                            Title 2
                        </td>
                        <td>
                            Title 3
                        </td>
                        <td>
                            Title 1
                        </td>
                        <td >
                            Title 2
                        </td>
                        <td>
                            Title 3
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 1
                        </td>
                        <td>
                            Row 1
                        </td>
                        <td>
                            Row 1
                        </td>
                        <td >
                            Row 1
                        </td>
                        <td>
                            Row 1
                        </td>
                        <td>
                            Row 1
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td >
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                        <td>
                            Row 2
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 4
                        </td>
                        <td>
                            Row 4
                        </td>
                        <td>
                            Row 4
                        </td>
                        <td >
                            Row 4
                        </td>
                        <td>
                            Row 4
                        </td>
                        <td>
                            Row 4
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Row 3
                        </td>
                        <td>
                            Row 3
                        </td>
                        <td>
                            Row 3
                        </td>
                        <td >
                            Row 3
                        </td>
                        <td>
                            Row 3
                        </td>
                        <td>
                            Row 3
                        </td>
                    </tr>
                </table>
            </div>

css

.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #3f7f00;

-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;

-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;

-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;

-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.CSSTableGenerator table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
background-color:#ffffff;
}
.CSSTableGenerator td{
vertical-align:middle;

background-color:#d4ffaa;
border:1px solid #3f7f00;
border-width:0px 1px 1px 0px;
text-align:center;
padding:7px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #5fbf00 5%, #3f7f00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #3f7f00) );
background:-moz-linear-gradient( center top, #5fbf00 5%, #3f7f00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00″, endColorstr="#3f7f00″);    background: -o-linear-gradient(top,#5fbf00,3f7f00);
background-color:#5fbf00;
border:0px solid #3f7f00;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #5fbf00 5%, #3f7f00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #3f7f00) );
background:-moz-linear-gradient( center top, #5fbf00 5%, #3f7f00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00″, endColorstr="#3f7f00″);    background: -o-linear-gradient(top,#5fbf00,3f7f00);
background-color:#5fbf00;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}

Ответа пока нет

<table>
<tr><td class="td-class">Заголовок</td><td>Содержание</td><td>Содержание</td></tr>
<tr><td class="td-class">Заголовок</td><td>Содержание</td><td>Содержание</td></tr>
</table>

4 комментария

Юзер

169

Twelvee - 2015-05-132 февраля 2015 11:49 - #40449

Клац или просто писать в первом td заголовок "строчки"

id26327371 - 2015-05-132 февраля 2015 11:53 - #40451

Цитата: Twelvee

просто писать в первом td заголовок "строчки"

подробнее?

там всё в ксс редактируется вроде бы

Twelvee - 2015-05-132 февраля 2015 11:57 - #40452

Разве нельзя просто создать класс с цветом ячейки.


.td-class{
background-color:green;
}

id26327371 - 2015-05-132 февраля 2015 12:05 - #40453

такое я типа и сам мог сделать

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

Как правильно создать css table?

Ответа пока нет

4 комментария

Похожие вопросы

Масштабируемая картинка через допполе

Вывод title под соответствующей картинкой

Не отображается модальное окно в IE 10

Картинка в javascript

Как прописать в ajax/freedback.php значение выбранное в календаре?

не работают подгруженные шрифты

Как ограничить параметр стиля?

Сначала видео потом HTML. Как?

Как сделать кнопки слайдеру?

Как перевести табличную вёрстку в html5 ?