Below I am posting some code that I am using to try to set a table width to be fixed proportions for each column. 10% for one, 90% for the other.
Presently, I am inserting a dijit.Tree widget via javascript at the "treeOne" div tag. When this tree opens up, my column grows in width to accomodate. I would like for it to always be 10% wide no matter what, and stop resizing the column. What am I doing wrong?
<table width="100%" border="1">
<thead>
<tr>
<td style="overflow:hidden;width:10%;"> Tree</td>
<td style="width:90%;" > Query</td>
</tr>
</thead>
<tbody>
<td style="overflow:hidden;width:10%;">
<div id ="treeOne">Insert Tree here</div>
</td>
<td style="width:90%;">
.
.
.
Table cells are supposed to work like this, expanding to accommodate whatever's inside of them.
If you want it to be fixed in size (and chop off the contents in the process), try using CSS with divs instead:
<style type="text/css">
.col1 {
clear:both;
float:left;
overflow:hidden;
width:10%;
}
.col2 {
float:left;
width:90%;
}
</style>
<div class="col1">
<div id ="treeOne">Insert Tree here</div>
</div>
<div class="col2">...</div>
Related
I have a question about a html table, i know a windows application that has this, a vertical scrollable table, but some columns are fixed on the page and others are always outside the page. I have a example:
The black border is the page, wich is responsive.
The red border is the table.
The green border is the part that is always fullscreen on the page,
always with The same columns.
The blue border is the part thats always off the screen with
information thats not required but if you need it you can scroll to
the right.
Anyone have an idea how to do this? In CSS? Or do i need Javascript for it?
My current code:
This class is attached to the tag.
/*MAIN TABLE*/
.tableMain {
font-size: 13px;
margin: 0;
padding: 0;
width: 200%;
table-layout: fixed;
}
But i think i need 2 classes, 1 on page class, and 1 off page class so i can define the columns that should be ouside the page. But i really dont know how to do that. Currently i've edited my headercells with this idea.
.tableCell, .tableHeaderCell{
width: 8.5%;
}
.tableSecondCell{
width: 150px;
}
This is my current HTML:
<table class='tableMain'>
<thead class='tableHeader'>
<tr class='tableHeaderRow'>
<th class='tableCell'>Name</th>
<th class='tableCell'>Email</th>
<th class='tableCell'>Role</th>
<th class='tableCell'>Username</th>
<th class='tableCell'>Department</th>
<th class='tableSecondCell'>Team</th>
<th class='tableSecondCell'>Web</th>
<th class='tableSecondCell'>App</th>
</tr>
</thead>
<tbody class='tableBody'>
<tr class='tableRow'>
<td class='tableCell'>User Name</td>
<td class='tableCell'>username1#example.com</td>
<td class='tableCell'>employee</td>
<td class='tableCell'>username1</td>
<td class='tableCell'>Support</td>
<td class='tableSecondCell'>Team1</td>
<td class='tableSecondCell'>True</td>
<td class='tableSecondCell'>True</td>
</tr>
</tbody>
</table>
Thanks for your time.
You can use instead below css for the table to scroll
.tableMain {
width: 100%;
max-width: 100%;
}
and wrap a div .table-responsive around table tag
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
Is it possible to set min-height for td in a table.
where inside the td only text is present.
if possible,then say how?
You need to use a div inside the td
HTML
<table>
<tr>
<td>
<div>Your code</div>
</td>
</tr>
</table>
CSS
div {
min-height: 300px;
}
Yes,you can do this
for example:
<tr>
<td>
<div>Lorem</div>
</td>
</tr>
div {
min-height: 300px;
}
Yes like this:
<td style="height:200px"></td>
Height property will act as min-height if overflow is left visible
I have a series of tabs (divs) that are being automatically numbered on page load and a series of tables also being automatically numbered. What is a short jquery script to show/hide the tables based on the div clicked. Ex. "tab1" shows/hides "table1", "tab2" shows/hides "table2", etc.
I was hoping for a way to have this work for an infinite amount of these pairs, rather than writing
$('.tab1').click(function(){
$('.table1').toggle();
});
$('.tab2').click(function(){
$('.table2').toggle();
});
for each one
EDIT:
Link to example: https://jsfiddle.net/captainmorganms/o1ndn2b2/3/
for(var c=1;c<=your_no;c++){
$('.tab'+c).click(function(){
$('.table'+$(this).attr("class").replace("tab","")).toggle();
});
}
Just use a simple for loop for it to work!
You can do it like this:
$('.tab1,.tab2,.tab3').on('click',function(){
$('.table'+$(this).attr('class').substr($(this).attr('class').indexOf("tab") + 3)).toggle();
});
For unknow number of tables, in your case, select tabs like this:
$('.section div')
Full example here https://jsfiddle.net/_jakob/o1ndn2b2/4/
I set tables hidden by default but you can remove it in CSS if you want them to be shown at start.
Given the markup provided in the example Fiddle, you can achieve this for any number of tables with a single event listener and a few extra attributes, like so:
document.querySelector(".section").addEventListener("click",function(event){
var target=event.target,table;
if(table=target.dataset.table)
if(table=document.getElementById(table))
table.classList.toggle("hide");
},0);
.section>div{
display:inline-block;
cursor:pointer;
margin:0 5px;
border:1px solid;
padding:3px;
}
table{
border:1px solid;
border-collapse:collapse;
margin-top:15px;
}
table.hide{
display:none;
}
td{
border:1px solid;
padding:5px;
min-width:50px;
height:30px;
}
<div class="section">
<div data-table="table1">Tab1</div>
<div data-table="table2">Tab2</div>
<div data-table="table3">Tab3</div>
</div>
<table class="hide" id="table1">
<tr><td>Table 1</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="hide" id="table2">
<tr><td>Table 2</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="hide" id="table3">
<tr><td>Table 3</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
I am using jQuery to reload data inside the tbody. However, the header column width keeps resizing event though I put the fixed width for the columns. I am using Firefox.
Simple HTML table:
<table style="width:95%;" border="1" align="center" >
<thead>
<tr>
<td class="header" style="width:20%">ProductFamily
<select onchange="selectCategoryChange()">
<option "1">1</option>
<option "2">2</option>
</select>
</td>
<td class="header" style="width:20%">ProductNum</td>
<td class="header" style="width:30%">ProductDesc</td>
<td class="header" style="width:5%">DT Rate</td>
<td class="header" style="width:5%">List Rate</td>
<td class="header" style="width:5%">Man Hour Unit</td>
<td class="header" style="width:5%">Precall</td>
<td class="header" style="width:5%">SOW</td>
<td class="header" style="width:5%">Box</td>
</tr>
</thead>
<tbody id="tbodyDataRow">
<!-- Data Rows Here -->
</tbody>
</table>
When the tbody.empty(), it automatically resizes the width of the header columns, which make the page looks ugly. and then when I reload the new rows, it resize it back to original width. Here is my Jquery code.
$(document).ready(function() {
selectCategoryChange = function()
{
var tbody = $("#tbodyDataRow");
tbody.empty();
};
});
This works, but I've not tested it in all browsers. Change HTML to:
<table border="1" align="center">
<thead>
<tr>
<th>ProductNum</th>
<th>Product</th>
<th>DT Rate</th>
<th>List Rate</th>
<th>Man Hour Unit</th>
<th>Precall</th>
<th>SOW</th>
<th></th>
</tr>
</thead>
<tbody id="tbodyDataRow">
<!-- tbody Content -->
</tbody>
</table>
You should avoid inline styles anyway. Add this CSS file:
table {
border: 1px solid black;
}
.header {
background-color: #ccc;
font-weight: bold;
min-width: 200px;
}
That'll fix your problem, but again it's not cross-browser tested. You might consider allowing the resize.
Final result Fiddle
Your table style="width:95%;" is the problem. You are expecting a table with 8 X 200px = 1600px width, but your table should has 95% as width, which can be more or less than 1600px. If it be deferent, the headers will be ajusted automatic. I'm sorry about my english.
I had a similar problem with empty() function applied on ul element.
HTML structure :
<table>
<tr>
<td>
<ul id="list"></ul>
</td>
<td>
...
</td>
</tr>
I have a JS timer which call an ajax function responsible to refresh the content of the list (ul). To update the list (ul) I started to empty it with the following code:
$("#list").empty();
At each iteration, the column width was incremented even if content was the same. I finally replaced the content by the initial content by using replaceWith function and this time it was ok:
$("#list").replaceWith('<ul id="list"></ul>');
I want to draw a image like below.
http://enterprise-now.com/wp-content/uploads/2011/02/ValueChain.png
My database has followed a record.
1, Inbound Logistics, Operations, Outbound Logistics, Marketing & Sales, Service
And I try to show as HTML document like this.
<table>
<tr>
<td background="arrow.gif">Inbound Logistics</td>
<td background="arrow.gif">Operations</td>
<td background="arrow.gif">Outbound Logistics</td>
<td background="arrow.gif">Marketing & Sales</td>
<td background="arrow.gif">Service</td>
</tr>
</table>
However, each lengths of innerText are different, so I want to fix the size of images automatically but I don't know how. It seems that the background option doesn't have image-fixed function. (Do I need to use JavaScript in order to get the size of innerText?)
Any help will be appreciated. Thanks.
I would style the table using CSS.
I have not tested this code, but you could do something like this:
<script>
.arrow {
background-image: 'path/to/your/pic/arrow.gif';
width: 100px;
height: 70px;
}
</script>
<table>
<tr>
<td class="arrow">Inbound Logistics</td>
<td class="arrow">Operations</td>
<td class="arrow">Outbound Logistics</td>
<td class="arrow">Marketing & Sales</td>
<td class="arrow">Service</td>
<td class="vertical" rowspan="5">Margin</td>
</tr>
<tr><td colspan="5">Infrastructure</td></tr>
<tr><td colspan="5">Human Resource Management</td></tr>
<tr><td colspan="5">Information Technology</td></tr>
<tr><td colspan="5">Procurement</td></tr>
</table>
And adjust the width and height parameters properly to achieve the size you want. For the vertical text of the word margin, you could do something like what they suggest in this article or in this one
Good luck!
You need to specify a width on the td's so that they remain a constant width.
http://jsfiddle.net/4g8jX/
table { width: 80%; }
/* 5 tabs, so 20 percent width */
td { width: 20%; text-align: center; }