вертикальная прокрутка меняет процентную ширину

У меня есть процентная ширина на столе и переполнение-y: авто. Когда появляется прокрутка, ширина таблицы уклоняется. Как сделать таблицу равной ширине (с прокруткой или без нее) Спасибо!вертикальная прокрутка меняет процентную ширину

Вот мой CSS:

html,body{height:99%;} 
.table1 
{ margin: 0; 
    padding: 0; 
    border-collapse: collapse; 
    width:98.1%; 
    height:5%; 
    text-align: box-sizing: border-box; 
    left;table-layout: fixed; 
} 
.table1 td 
{ border-collapse: collapse; 
    background-color: #EAEAEA; 
    border: 1px solid lightgrey; 
    padding-left: 3px; 
} 
#container 
{ overflow-y:auto; 
    height:20%; 
    width:100%;left:0; 
    right:0; 
} 

.table2 
{ margin: 0; 
    padding: 0; 
    border-collapse: collapse; 
    left:0; 
    right:0; 
    min-width:98.1%; 
    box-sizing: border-box; 
    table-layout: fixed; 
} 
.table2 tr 
    { height:30px; 
    } 
.table2 td 
{ margin: 0; 
    border-collapse: collapse; 
    border: 1px solid lightgrey; 
    border-top:none; 
    border-right: 1px solid lightgrey; 
}

А вот мой HTML:

<html> 
    <head> 
    </head> 

    <body BGCOLOR="#EAEAEA" TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 > 
    <table class ="table1"> 
    <colgroup> 
     <col width="20%"/> 
     <col width="50%"/> 
     <col width="30%"/> 
    </colgroup> 
    <tbody> 
     <tr> 
     <td>Col 1</td> 
     <td>Col 2</td> 
     <td>Col 3</td> 
     </tr> 
    </tbody> 
    </table> 

    <div id="container"> 
    <table class="table2" BGCOLOR="WHITE"> 
    <colgroup> 
     <col width="20%"/> 
     <col width="50%"/> 
     <col width="30%"/> 
    </colgroup> 
    <tbody> 
     <tr>    
     <td>Name</td> 
     <td>Name</td> 
     <td>Name</td> 
     </tr> 
     <tr>    
     <td>Name</td> 
     <td>Name</td> 
     <td>Name</td> 
     </tr> 
     <tr>    
     <td>Name</td> 
     <td>Name</td> 
     <td>Name</td> 
     </tr> 
     <tr>    
     <td>Name</td> 
     <td>Name</td> 
     <td>Name</td> 
     </tr> 
     <tr>    
     <td>Name</td> 
     <td>Name</td> 
     <td>Name</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

</body> 
</html>

источник

2015-07-15 elas

Попробуйте это:

html,body{height:99%;} 
.table1 
{ margin: 0; 
    padding: 0; 
    border-collapse: collapse; 
    width:calc(100% - 17px); 
    height:5%; 
    text-align:left; 
} 
.table1 td 
{ border-collapse: collapse; 
    background-color: #EAEAEA; 
    border: 1px solid lightgrey; 
    padding-left: 3px; 
} 
#container 
{ overflow-y:scroll; 
    height:20%; 
    width:100%;left:0; 
    right:0; 
} 

.table2 
{ margin: 0; 
    padding: 0; 
    border-collapse: collapse; 
    left:0; 
    right:0; 
    width:100%; 
     box-sizing: border-box; 
    table-layout: fixed; 

} 
.table2 tr 
    { height:30px; 
    } 
.table2 td 
{ 

    border: 1px solid lightgrey; 
    border-top:none; 
    border-right: 1px solid lightgrey; 
}

Вы можете увидеть изменения в container где я width:calc(100% - 17px);. Widthcontainer уменьшен для 17px (ширина скроллер), но я также, измените это overflow-y:scroll;. Теперь все линии будут, ну, в очереди :)

border-collapse.table1 td и .table2 td ... и overflow тоже.

точка находится в этом width:calc(100% - XYpx), в данном случае 17px (ширина скроллинга)

Я надеюсь, что это то, что Вам нужно.

Существует Fiddle example

Update:

создать две js функции. Первая проверка есть прокрутка в container элемент и приспособить width от него. Вторая функция предназначена только для тестирования, имитируя, если в этом случае изменяется height.

В действительности, когда вы добавляете больше строк, количество которых больше containerheight, ваш стол будет адаптироваться. Или в браузере изменения размера тоже.

В вашем случае Вам не нужна эта вторая функция js, которая называется chVl(), она в скрипке только для теста, как я уже говорил.

Try this Fiddle now

источник

2015-07-15 20:28:50 nelek

Большое спасибо нелек! Это отлично работает! Но разве не существует способа, не показывающего скроллер все время? – elas

@elas Нет проблем. Я использую все это время. Ну, вы можете, но тогда вы должны использовать 'js',' hidden field', потому что каждый 'postback' и т. Д.' Js' будет вычислять разницу в элементе 'container'' offsetWidth' и 'clientWidth', а затем положить результат в некоторые 'hiddenfield' (потому что' postback') и изменять 'width'' container', все время. Или, может быть, кто-то может лучше объяснить это с помощью некоторого примера. Я не возражаю, если видна прокрутка, но это мое мнение. – nelek

@elas Я предлагаю новую скрипку в обновлении. Попробуй это сейчас. – nelek

удалить overflow-y:auto; в #container

так:

#container 
{ 
    height:20%; 
    width:100%; 
    left:0; 
    right:0; 
}

источник

2015-07-15 20:07:40

Я удалил перелив-у: авто в #container и теперь он не показывает свитка больше. Я хочу, чтобы свиток показывался при необходимости. Но я не хочу, чтобы ширина таблицы2 уменьшалась при показе прокрутки. Вы можете удалить tr из таблицы2 и увидеть разницу. – elas

@ Кристофер Беднар Если «переполнение» удалено, скроллер не будет отображаться, и остальная часть таблицы не будет доступна. Я предлагаю решение с небольшими изменениями, но это означает, что * скроллер * будет отображаться все время. – nelek

Ах, ладно, моя ошибка. Я неверно истолковал, что подразумевалось под «с прокруткой или без нее» и не совсем понимал, что элементы отсутствуют.В следующий раз я обязательно обращу внимание на такие детали. –

вертикальная прокрутка меняет процентную ширину

ответ

Смежные вопросы