Нужно уменьшить ширину стола - PullRequest
Новая
       4

Нужно уменьшить ширину стола

1 голос
/ 05 марта 2011

У меня есть таблица HTML с 10 столбцами и ее width почти 850px.Мой общий экран width равен 960px.

. У меня есть ползунок в правой части стола, и при щелчке по боковой панели боковая панель раскроется с деталями.Его width почти равен 200px.

. В этом случае я не могу уменьшить width таблицы из-за 10 столбцов пробел.* Как я могу уменьшить таблицу width с jQuery / JavaScript ?А текстовый редактор tinymce доступен внутри моей таблицы?

Ответы [ 2 ]

1 голос
/ 15 ноября 2011

На вашем месте я бы установил ширину стола на 100%;Структура будет выглядеть примерно так: 

<body>
  <div id="sidebar"> </div>
  <div id="content">
     <table width="100%"> columns and data here </table>
  </div>
</body>

, а ваша CSS будет примерно такой: 

#sidebar{ width:20%;}
#content{ width:80%;}

таким образом, когда ваша боковая панель становится больше, ваш контент становится меньше, и поэтомутаблица.

примерно так: 

var showSideBar = function(){ 
   $("#sidebar").css("width", "40%");  
   $("#content").css("width", "60%");  
}

Если ваша проблема в том, что содержимое не читается в столбцах таблицы, поскольку они слишком малы, я предлагаю вам использовать Плагин colResizable .

Ширина столбцов должна быть установлена ​​в% значениях

0 голосов
/ 05 марта 2011

Похоже, что вы хотите сделать, это расширить боковую панель при нажатии и соответственно уменьшить таблицу.Затем, если щелкнуть боковую панель еще раз, уменьшите ее до исходного размера, а затем разверните таблицу до ее первоначального размера.

Предполагая следующий HTML 

<table class="yourTable">
<tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 6</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
 </tr></table><div class="sidebar">Some sidebar here</div>

и некоторые стили, например: 

.yourTable {
 float:left;   
 width:850px;
 height:500px;
}

.shrinkTable {
 width:680px;   
}

.sidebar {
 float:left;
 width:100px;
 height:500px;
}

.expandSidebar {
 width:200px;   
}

Затем вы можете использовать jQuery для изменения размера таблицы и боковой панели при нажатии: 

$(document).ready(function(){
    $('.sidebar').click(function(){
      $('.yourTable').toggleClass('shrinkTable');
$('.sidebar').toggleClass('expandSidebar');
    })
});

Полный пример можно найти здесь: http://jsfiddle.net/a4mBb/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...