Need to reduce table width
I have an HTML table with 10 columns and its width nearly 850px. My total screen width is 960px.
I have a slide bar in the right side of the table and on-click on the side bar, the side bar will expand with the detail. Its width is nearly 200px.
In this case, I am not able reduce the width of the table, due to 10 columns space.
How can I reduce the table wi开发者_如何学运维dth from jQuery / JavaScript? And tinymce text editor is available inside the my table?
If I were you, I would set table width to 100%; The structure would be something like this
<body>
<div id="sidebar"> </div>
<div id="content">
<table width="100%"> columns and data here </table>
</div>
</body>
and your css something like this:
#sidebar{ width:20%;}
#content{ width:80%;}
in this way, when you sidebar gets bigger, your content gets smaller, and so does the table.
something like this:
var showSideBar = function(){
$("#sidebar").css("width", "40%");
$("#content").css("width", "60%");
}
If your problem is that content is not readable in your table columns since they are too small, I suggest you to use the colResizable plugin.
Column widths must be set in % values
It sounds like what you want to do is expand the sidebar when it is clicked and reduce the table accordingly. Then if the sidebar is clicked again shrink it to its original size and then expand the table to its original size.
Assuming the following 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>
and some styles like:
.yourTable {
float:left;
width:850px;
height:500px;
}
.shrinkTable {
width:680px;
}
.sidebar {
float:left;
width:100px;
height:500px;
}
.expandSidebar {
width:200px;
}
Then you can use jQuery to resize the table and sidebar on click:
$(document).ready(function(){
$('.sidebar').click(function(){
$('.yourTable').toggleClass('shrinkTable');
$('.sidebar').toggleClass('expandSidebar');
})
});
Full example can be found here: http://jsfiddle.net/a4mBb/
加载中,请稍侯......
精彩评论