需要降低工作台宽度

我有一个HTML表10列及其width近850px。我的总屏幕width是960px。需要降低工作台宽度

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

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

如何减少表width从jQuery的/的JavaScript？我的桌子内有锡蒂姆文本编辑器吗？

来源

2011-03-05 Elankeeran

您有链接我们可以看到或屏幕抓取？ – cusimar9 2011-03-05 18:55:43

你寻找的宽度是多少？因为你也可以在HTML中做到这一点没有JavaScript – 2011-03-05 18:56:46

请给我们一些代码（你的描述不够准确） – Thariama 2011-03-07 09:04:12

这听起来像你想要做的是扩大边栏，当它被点击并相应地减少表。然后，如果再次单击边栏，请将其缩小至原始大小，然后将表格展开至原始大小。

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

来源

2011-03-05 19:14:02

感谢你的例子，但它修复较少的内容和图像表，但在我的情况下，我在里面使用tinymce文本编辑器我的桌子。 – Elankeeran 2011-03-06 13:48:09

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

列宽必须设置为％值

来源

2011-11-15 18:16:20 ChangePictureWeekly

需要降低工作台宽度

回答

相关问题