Полезная информация

Хотите узнать больше о расширениях? Посмотрите ролики, рассказывающие о работе с расширениями Firefox.

№103-12-2019 16:08:54

mikado3333
Участник
 
Группа: Members
Зарегистрирован: 29-05-2014
Сообщений: 4
UA: IE 11.0

Ширина ячеек в процентах при table.style.display = block

Приветствую! Не могу понять как считает браузер ширину колонок в процентах, если у таблицы в стилях display = block, width 100%?
4 колонки, 1,3 ставлю ширину 20%, 2,4 ставлю 30% - изменения есть, но ширина таблицы как бы не учитывается. Ставлю 1,3 - 2%, 2,4 = 1% результат будто задал 20%/30% и ширина таблицы учитывается.

Выделить код

Код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Cache-Control" content="no-cache" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="-1" />
        <title>РАЗРАБОТКА</title>
        
 
        <style>
html    
    {height:100%;}
body
    {background: RGB(64,73,82); color:#000;  height:100%; padding:0.5%; margin:0px; overflow:hidden;}
    
.table_style1
    {border:solid 2px #807C6E; border-collapse:collapse; display:block; float: left; height:100%; width:100%; overflow:auto; position:relative;  z-index:1;}
    
.table_style1 thead 
    {overflow:hidden;position: sticky; top:0; z-index:2; width:100%;}
 
.table_style1 thead th
    {background:#4f4f4f; border-top-width:0; color:white; cursor:pointer; font-size:90%; font-weight:normal;padding:3px; min-width:30px; text-align:center;white-space:nowrap;user-select:none; -moz-user-select:none; }    
 
.table_style1   td 
    {border:solid 1px #807C6E; font-size:80%; padding:3px; user-select:none; -moz-user-select:none; min-width:30px; max-width:25vw; white-space:pre-line;}      
 
.table_style1 td:hover, .table_style1 thead th:hover
    {user-select:text; -moz-user-select:text;}  
 
.table_style1 tbody 
    {background:#D2B48C; width:100%;}
    
.table_style1 td:nth-child(1)       
    {border-left-width:0;}
 
.table_style1 td:nth-last-child(1)  
    {border-right-width:0;} 
 
.table_style1  tbody  tr[data-mark="1"] td 
    {background-color:#AFCCB8;} 
 
.table_style1 tr[data-del="1"]  td
    {text-decoration:line-through;} 
 
.table_style1 th:nth-of-type(1),.table_style1 th:nth-of-type(3)      
    {width:1%}
 
.table_style1 th:nth-of-type(2),.table_style1 th:nth-of-type(4)      
    {width:2%}
 
        </style>
 
  
    </head>
    <body>
        
        
         <table class="table_style1">
          <thead>
           <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
           </tr>
          </thead>
          <tbody>
            <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr>  
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> 
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr>  
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> 
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr>  
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> 
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr>  
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> 
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr>  
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> 
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr>  
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> 
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr>  
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> 
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr>  
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> 
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr>  
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> 
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr>  
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr> 
           <tr>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
            <td>test test </td>
           </tr> 
           <tr>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
            <td>тест</td>
           </tr>
          </tbody>
         </table>
 
    </body>
</html>

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2011 Mozilla Russia
Язык отображения форума: [Русский] [English]