Question

我有一个 HTML 表， 10列，其width几乎850px。我的总屏幕width为960px。

我在桌子的右侧有一个滑动条，在侧栏上点击，侧栏会随着细节而展开。其width差不多200px。

在这种情况下，由于 10列空间，我无法减少表的width。

如何从 jQuery / JavaScript 缩小表格width？在我的桌子里面可以找到tinymce文本编辑器吗？

Answer 1

如果我是你，我会将表格宽度设置为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 plugin。

列宽必须以％值

设置

Answer 2

听起来你想要做的就是在点击边栏时展开边栏并相应地缩小表格。然后，如果再次单击侧边栏，则将其缩小为原始大小，然后将表格展开为原始大小。

假设以下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/

需要减少表宽

2 个答案: