HTML column width changes when table row is hidden - javascript

I am a relative newcomer to web programming, so probably I am making some obvious mistake here.
When I am trying to hide a row in a table from javascript like rows[i].style.display = 'none', the table layout is getting completely broken. Originally, the cell content was getting wrapped, and the table width was getting shrunk. I then added style="table-layout: fixed" in the table tag and style="white-space:nowrap" in each td. This stopped the line wrapping, but still the content was not aligned on a line. Cells started moving left if there is space and column width varied from one row to another. I then added a fixed width to each of the th and td element and also to the div containing the table. Still the problem remained.
My current HTML is something like the following.
<div style="width: 300px">
<table id="errorTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout: fixed">
<tr id="HeaderRow">
<th style="width: 100px;">Header 1</th>
<th style="width: 50px;">Header 2</th>
<th style="width: 150px;">Header 3</th>
</tr>
<tr id="DetailRow1">
<td style="white-space:nowrap; width: 100px;">Data 1_1 in Row 1</td>
<td style="white-space:nowrap; width: 50px;">Data 1_2 in Row 1</td>
<td style="white-space:nowrap; width: 150px;">Data 1_3 in Row 1</td>
</tr>
<tr id="DetailRow2">
<td style="white-space:nowrap; width: 100px;">Data 2</td>
<td style="white-space:nowrap; width: 50px;">Data 2</td>
<td style="white-space:nowrap; width: 150px;">Data 2</td>
</tr>
<tr id="DetailRow3">
<td style="white-space:nowrap; width: 100px;">Data 3_1</td>
<td style="white-space:nowrap; width: 50px;">Data 3_2</td>
<td style="white-space:nowrap; width: 150px;">Data 3_3</td>
</tr>
</table>
</div>
When the table is displayed first time, the columns are aligned properly, with width 100, 50 and 150 px respectively. But if a row, say the second one is hidden, the cell width of the remaining two displayed rows are no longer fixed at 100, 50 and 150 and data is no longer aligned vertically. Please note that the overall table width remains 300 px. Data in each cell moves left if there is available space and the additional space is used by the last, in this case, third column.
The following post was helpful but did not solve my problem fully, as you can see.
Hiding table rows without resizing overall width
Any help will be most welcome.

The problem is the display type that you use to make the table-row visible.
To hide a table-row use display="none"
To show a table-row use display="table-row"
I did a sample so you can see these in action.
function show(){
document.getElementById('trB').style.display='table-row';
}
function hide(){
document.getElementById('trB').style.display='none';
}
#import url("https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css");
table{
border: 1px solid #ccc;
}
<table id="myTable" class="table table-striped table-hover">
<thead>
<tr>
<td>#</td>
<td>Letter</td>
</tr>
</thead>
<tbody>
<tr id="trA">
<td>1</td>
<td>A</td>
</tr>
<tr id="trB">
<td>2</td>
<td>B</td>
</tr>
<tr id="trC">
<td>3</td>
<td>C</td>
</tr>
</tbody>
</table>
<button id="showB" onclick="show()">show B</button>
<button id="hideB" onclick="hide()">hide B</button>

Hope this could help who are struggling with the same problem.
Instead of using display: none; I used visibility: collapse; for the hidden rows. This still keeps the width of the columns and the whole layout.

I had the same problem: I tried to hide a column by elem.style.display="none" but when showing again the layout was broken. This display-style worked for me:
columns.item(i).style.display = "table-cell";

Always fix the width of your columns. Would that sole your problem?
.myTable td{ width:33% !important; }
Ideally, you should also enclose header and body sections using thead and tbody
<table>
<thead>
<tr> ... </tr>
</thead>
<tbody>
.
.
.
</tbody>
</table>

I'm having the same problem. I threw a span inside of each table to see if I could force the width and it seems to work. It's ugly though.

Related

removing some empty table details and adding classes and width

I am trying to remove the empty code from table with jquery and add some class to the table tags
like i am trying to remove <td class="faux_align"></td> and <th class="faux_align"></th> from the table and check if the table already has a class of table - do nothing and if it does not have a class of table' - do add the classtable` to the table tag.
and also checking if the width attribute is defined within table and if not, add width as 100% and if defined but width is not 100%, make its width 100%
I am trying something like this:
$('table > tr > td').remove();
and same with th tag, but i am confused how do i do with remaining this in one single jquery function.
$('table').addClass('table').attr('width', '100%').find('td.faux_align, th.faux_align').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="">
<tr>
<th class="faux_align">faux</th>
<th>text</th>
</tr>
<tr>
<td class="faux_align">faux</td>
<td>text</td>
</tr>
</table>
<table class="table">
<tr>
<th class="faux_align">faux</th>
<th>text</th>
</tr>
<tr>
<td class="faux_align">faux</td>
<td>text</td>
</tr>
</table>

HTML half table is scrollable while others is fixed

I'm try to design a table which the left columns are fixed while right columns are scroll horizontally, and the header of the whole table is fixed during the scroll down. I have searched some solution but only able to fixed one column, my idea is in a table, can scroll like this:
column1 column2 column3 column4 | column5 column6 column7
------------------------------- |------------------------
|
//body and header are fixed | //only body and header can scroll
//when scroll down | //horizontally, fixed while scroll
| //down
Can you just use two separate tables, in separate divs? That way you can easily make one div scrollable however you want, and the other with different scrollable styling. You can use overflow-y: scroll and overflow-x: scroll to make the parent div scrollable.
If u seperate the columns with divs, the design goal can be easily achieved. Apply the specific CSS styles you want.
You can place the header of scrollable column in another div/span tag and make it fixed.
CSS
table {
width: 100%;
}
thead, tbody, tr, td, th { display: block; }
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
/*text-align: left;*/
}
tbody {
height: 120px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
}
And HTML :
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>
Based on this code I have created fiddle

how do you create a scroll bar menu that scrolls only on the content and not on the header

I have a list of names : first and last. The list is long, so I need to have a scroll bar menu. When I scroll, I should only scroll on the names and not on the column header.
I managed to do so but the problem is that the second column elements are not displayed right under the column name as you can see here http://jsfiddle.net/MmLQL/44/.
<table border=1 width=200px >
<tr>
<th>First Name</th>
<th>looong column name </th>
</tr>
</table>
<div class="div_scroll">
<table border=1 width=200px >
<tr>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
</div>
And even if I put the header and the content in the same table, and create a div to wrap the table content and add a class to that div to enable scrolling, it doesn't work http://jsfiddle.net/MmLQL/43/
What am I doing wrong?
You probably don't need javascript for this. Just set the widths of the columns to be equal. Here's a quick example:
th, td {
width: 50%;
}
View it on JSFiddle
You need to set the width of the columns to be the same for each table. Maybe create a css class for each column and apply them to the columns in the tables.
Example CSS classes:
.ColumnOne { width: 40%; }
.ColumnTwo { width: 60%; }
Then apply to the columns:
<table border=1 width=200px >
<tr>
<th class="ColumnOne">First Name</th>
<th class="ColumnTwo">looong column name </th>
</tr>
</table>
<div class="div_scroll">
<table border=1 width=200px >
<tr>
<td class="ColumnOne">John</td>
<td class="ColumnTwo">Smith</td>
</tr>
...

Table row hover, background change and click but have some child cells in the row have different properties

<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('go.html');">
<td>1</td>
<td>John/td>
<td>Dump</td>
</tr>
</table>
Javascript:
function ChangeColor(tableRow, highLight)
{if (highLight)
{tableRow.style.backgroundColor = '#F5FFDB';}
else
{tableRow.style.backgroundColor = '';}}
function DoNav(theUrl)
{document.location.href = theUrl;}
I use the following structure to draw the table. When I hover on a row it changes the background and anywhere I click on the row it will jump to the url. What I'm trying to do is have some id identifier (that maybe goes into <td>) which basically tells certain columns in a row to behave differently. Namely this is what I'm looking for:
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr>
<td id="hover_go_style_1">1</td>
<td id="hover_go_style_1">John</td>
<td id="hover_go_style_2">Dump</td>
</tr>
</table>
Any ideas?
EDIT:
I forgot to mention... the id="hover_go_style_1" would take me to one url and id="hover_go_style_2" would take me to another url. That's the "difference". As it is now with onClick the whole row takes me to one url, but in essence im trying to isolate cells. Not sure how to explain this better.
You should be using CSS for your hover color, it's much simpler there. Your click event can be much nicer hooked up and handled completely in your JavaScript also. I've added a data-url (HTML5-compatible) attribute to your row to define the URL.
jsFiddle
HTML
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr data-url="go.html">
<td>1</td>
<td>John</td>
<td>Dump</td>
</tr>
</table>
JS
$('tr[data-url]').click(function () {
window.location.href = $(this).attr('data-url');
});
CSS
tr:hover td {
background-color:#F5FFDB;
}
/* Style the third column differently */
tr:hover td:nth-child(3) {
background-color:#F00;
}

jQuery: Position of Images inside a HTML Table

Say I have a table:
<table id="table1" border="1">
<tr>
<td id='id1' style="width:200px"></td>
<td id='id2' style="width:200px">2222</td>
</tr>
</table>
I am using following code to add images to these table cells
$('#id1').append('<img src=images/image1.jpg />');
$('#id1').append('<img src=images/image2.jpg />');
$('#id1').append('<img src=images/image3.jpg />');
$('#id2').append('<img src=images/image4.jpg />');
Now what I want to achieve is this:
1. for cell "id2", i want the image always align to the right so it's not next to the text.
2. for cell "id1", since those 3 images has different sizes (24x24, 32x32, 24x24), i don't want them to be next to each other. what I want is that as if there are 3 small cells in that cell, each with size 32x32, and put those images into those small cells one by one.
I am not good at html or javascript. is it possible to do so?
CSS
#id2 img { float: right; }
HTML
<table id="table1" border="1">
<tr>
<td id='id1' style="width:200px"><table><tr></tr></table></td>
<td id='id2' style="width:200px">2222</td>
</tr>
</table>
Javascript
$('#id1').find('tr').append('<td><img src=images/image1.jpg /></td>');
...
Based off item #2 I'd say you're not done defining your table. You need to add a nested table in #id2 (the merits of this approach can be debated later).
So your table would be
<table>
<tr>
<td id="id1"></td>
</tr>
<tr>
<td>
<table>
<tr>
<td id="id1a"></td>
<td id="id1b"></td>
<td id="id1c"></td>
</tr>
</table>
</td>
</tr>
</table>
From there you'd append your images to the sub-cells.

Categories