Html Table

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем id26327371, 2 фев 2015.

  1. id26327371

    id26327371 New Member

    Регистрация:
    2 фев 2015
    Сообщения:
    2
    Симпатии:
    0
    Приветствую!

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

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

    Код (Text):
    <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>
     
  2. id26327371

    id26327371 New Member

    Регистрация:
    2 фев 2015
    Сообщения:
    2
    Симпатии:
    0
    Код (Text):
    .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;
    }
     
Загрузка...

Поделиться этой страницей