23/23 97% в чем ошибочка?

Enot16 · 15.Ноябрь.2016 05:51:09

    <table>
        <tr>
            <th class="text1">Город</th>       
            <th class="colorth" class="text2">Посещений</th>       
            <th class="text3">%</th>
        </tr>
        <tr>
            <td>СПб</td>         
            <td class="text2">199</td>             
            <td class="text3">65.12</td>
        </tr>
        <tr class="col1">
            <td>Москва</td>      
            <td class="text2">69</td>              
            <td class="text3">21.3</td>
        </tr>
        <tr>
            <td>Киев</td>        
            <td class="text2">5</td>               
            <td class="text3">8</td>
        </tr>
        <tr class="col2">
            <td colspan="2">Посещений за весь период</td>
            <td class="text3">273</td>
        </tr>
        </table>
</body>

body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}

table {
border-collapse: collapse;
width: 100%;
}

th {
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 10px;
color: white;
background-color: darkcyan;

}

td {
border-bottom: 1px solid lightgray;
padding: 10px;
width: 33%;

}

.col1 {
background-color: lightyellow;

}

.col2 {
background-color: lightyellow;

}

.colorth {
background-color: lightblue;

}

.text1 {
text-align: left;

}

.text2 {
text-align: center;
width: 100px;

}

.text3 {
text-align: right;

}

Ineska · 15.Ноябрь.2016 07:04:05

При такой записи два класса к элементу не применяются.
Пишется так:
<th class="colorth text2">Посещений</th>
Но в данном случае проверьте, а так ли необходим второй класс .text2

.col1 {
background-color: lightyellow;

}

.col2 {
background-color: lightyellow;

}

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

Enot16 · 15.Ноябрь.2016 07:50:13

Все получилось! Большое спасибо)

Jane_Zemlyanskaya · 09.Декабрь.2016 13:31:20

тоже различия есть в таблице.
вот стиль
body {
width: 350px;
margin: 0;
padding: o 10px;
font-size: 14px;
font-family: Arial, sans-serif;
border-collapse: collapse;
}
table {
border: 5px;
}

th { width: 33%;
padding: 10px;
padding-right: 10px;
color: white;
background-color: darkcyan;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
td { padding: 10px;
padding-right: 10px;
border-bottom: 1px solid lightgray;
text-align: right;
}
.row {background-color: lightblue;
}
.row-1 {text-align: right;
}
.row-4 {background-color: lightyellow;
}
.th1 { text-align: left;
}
.th2 {text-align: center;
}

КОД

Испытание: итоговая таблица

Итоговая таблица

    <th class="th1">Город </th> 
    <th class="row">Посещений </th>
    <th class="row-1"> % </th>
    <tr>
        <td class="th1">
    СПб     </td>
    <td class="th2">199 </td>
    <td> 65.12 </td>
    </tr>
    <tr class="row-4"> 
        <td class="th1">Москва  </td>
        <td class="th2"> 69 </td>
              <td>21.3 </td>
              </tr>
              <tr>
                  <td class="th1">        Киев  </td>
                  <td class="th2"> 5 </td>
                  <td> 8 </td>
                  </tr>
                  <tr class="row-4">
                      <td class=th1 colspan="2">
    Посещений за весь период </td>
    <td class="row-3"> 273 </td>
    </tr>

Ineska · 09.Декабрь.2016 13:34:04

Свойство должно задаваться для table.

Jane_Zemlyanskaya · 11.Декабрь.2016 09:09:19

исправила, но все равно что-то не так.

Tala · 11.Декабрь.2016 09:52:01

вот это свойство зачем?

разве у таблицы есть рамка?

Tala · 11.Декабрь.2016 09:54:40

И вот такие дублирования :[quote]
padding: 10px;
padding-right: 10px;
[/quote]

тоже лишнее - первая строка уже включает в себя паддинг справа.

Jane_Zemlyanskaya · 11.Декабрь.2016 14:24:33

проблема с отступом, но margin особо не помогает

Tala · 11.Декабрь.2016 14:30:44

показывайте ваш последний вариант кода - и SCC и HTML

Jane_Zemlyanskaya · 11.Декабрь.2016 14:43:41

body {
width: 350px;
margin: 0px;
padding: o 10px;
font-size: 14px;
font-family: Arial, sans-serif;

}
table { border-collapse: collapse;
}

th { width: 33%;
padding: 10px;
padding-right: 10px;
color: white;
background-color: darkcyan;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
td { padding: 10px;
border-bottom: 1px solid lightgray;
text-align: right;
}
.row {background-color: lightblue;
}
.row-1 {text-align: right;
}
.row-4 {background-color: lightyellow;
}
.th1 { text-align: left;
}
.th2 {text-align: center;
}

<body>
    <table>
    <h1> Итоговая таблица</h1>

    <th class="th1">Город </th> 
    <th class="row">Посещений </th>
    <th class="row-1"> % </th>
    <tr>
        <td class="th1">
    СПб     </td>
    <td class="th2">199 </td>
    <td> 65.12 </td>
    </tr>
    <tr class="row-4"> 
        <td class="th1">Москва  </td>
        <td class="th2"> 69 </td>
              <td>21.3 </td>
              </tr>
              <tr>
                  <td class="th1">        Киев  </td>
                  <td class="th2"> 5 </td>
                  <td> 8 </td>
                  </tr>
                  <tr class="row-4">
                      <td class=th1 colspan="2">
    Посещений за весь период </td>
    <td class="row-3"> 273 </td>
    </tr>

Ineska · 11.Декабрь.2016 14:50:38

Ноль и буква “о” - это разные символы.