Показать сообщение отдельно
  #3 (permalink)  
Старый 13.09.2015, 13:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

css скрытие строк таблицы без Jquery
alexgirya,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  table tbody tr:nth-child(n +5),#dn{
    display:none;
  }

  td{
    border:solid 1px #004F72;
  }

  :checked~table tbody tr:nth-child(n +5){
    display:table-row;
  }

  table{
    border-collapse:collapse;
    margin:4px;
  }

  label{
    text-decoration:none;
    text-align:center;
    padding:1px 10px;
    border:solid 1px #004F72;
    border-radius:12px;
    color:#E5FFFF;
    background:#d4c794;
  }

  label:after{
    content:"Ещё ?";
    color:#E0FFFF;
  }

  :checked~label:after{
    content:"Скрыть ?";
    color:#0FF;
  }
  </style>
</head>

<body>
<input name="" type="checkbox"  id="dn">
<table width="400" summary="" >
    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>    </tbody>

</table>
<label for="dn"></label>
</body>

</html>
Ответить с цитированием