Data Grid Table with sliding info - div inside tr positioning - html

I have a table like this below. And there is a div container with information (usually large text), so I want to position these divs straight under each tr row to make them toggleable (like sliding panel). Can you please advise how to position it with CSS/Javascript? Though, this html is not semantic so if there is another way to do this without a div inside tr (I can't remove table in the code, but maybe some dd/dt?) - it'll be great!
<table width="100%" id="datatable" class="table-sortable">
<thead>
<tr>
<th id="th_name">Name</th>
<th id="th_email" class="table-th-sort ">E-mail</th>
<th id="th_birthday">Birthday</th>
</tr>
</thead>
<tbody>
<tr class="table-tr-group-head">
<td class="someclass">Name1</td>
<td class="table-td-sort">abc#abcd.com</td>
<td class="someclass">01.01.1981</td>
<div class="info">Large text1</div> <!-- this one -->
</tr>
<tr class="table-tr-group-head">
<td class="someclass">Name2</td>
<td class="table-td-sort">def#abcd.com</td>
<td class="someclass">02.02.1982</td>
<div class="info">Large text2</div> <!-- this one -->
</tr>
<tr class="table-tr-group-head">
<td class="someclass">Name3</td>
<td class="table-td-sort">ghi#abcd.com</td>
<td class="someclass">03.03.1983</td>
<div class="info">Large text3</div> <!-- this one -->
</tr>
</tbody></table>
P.S I cannot inject another tr row after each like <tr><td> </td><td><div class="info">Large text</div></td><td> </td></tr> because this table is generated by Javascript and somehow when I make it there is a data shift.

Moo, I fought with this one for quite a while on my app....there's no simple solution really. Datatables can't handle colspans, which limits the ability to add rows as you've noticed. Unless you want to do some creative spanning of divs the old fashioned way, adding a row is basically out. Since Datatables has such tight control of the table syntax, doing some sort of shifting via CSS could be theoretically possible, but incredibly difficult....but I suspect if you went this route, you'd be doing a massive jumble of javascript inner html insertion.
After banging my head for quite a while, I settled for Qtip (http://craigsworks.com/projects/qtip/) I have the tip pop under the row it was triggered from via context and css, which gives a quasi-illusion of the table shifting. For a while I considered dumping Datatables, but I found that our customers really appreciate the functionality that it provides and others don't even come close. As an added bonus, it's very easy to setup and is very customizable.
Good luck.

Related

Minimally invasive frozen HTML table header row?

There are many different ways to freeze a header row of an html table, but I need something minimally invasive. I'm working in a large and complex system in which the table html is generated through many layers of back-end coding and it will be non-trivial and risky to change the table structure (lots of complex javascript and css depends on the HTML structure remaining as-is and I don't want to break anything). So I'm looking for a way to freeze my html header rows (2 rows need to be frozen, not just 1) by changing/adding only CSS and/or adding attributes to the table or rows in the table. Here's an accurate example of my table:
<table>
<tbody>
<tr>
<th> </th>
<th id="col0">Option ID</th>
<th id="col1">Description</th>
<th id="col2" title="Sort on Description">Description</th>
</tr>
<tr>
<th> </th>
<td title="Filter on Option ID (Text)">
<input type="text" id="f0">
</td>
<td title="Filter on Description (Text)>
<input type="text" id="f1">
</td>
</tr>
<tr>
<td><input type="radio" name="chk0" id="c_01Q0"></td>
<td>0093005</td>
<td>Local pickup & delivery.</td>
</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
</tbody>
</table>
As you can see it's nothing exotic. But as I've searched for solutions I have found a lot of examples like this, which require more structural changes to the HTML than I dare make (I'm mainly just worried about having to surround the table by section and div elements -- and it seems like a lot of CSS just to freeze a header row). The 1st two rows both need to be frozen so that when I scroll down, they remain nicely in-place. The first data row (non-frozen) is the row containing 0093005.
A few objectives/desires:
Brevity is more important than elegance. I'm fine with a hack, in this case.
Don't change the HTML structure if at all possible, though adding attributes to existing elements can be done.
Pure CSS additions/changes without touching the HTML would be ideal, but I suspect the HTML will need to be decorated to some extent, and that is ok.
Use of js or jquery is a last resort only, to be avoided if possible.
Many thanks in advance for everyone's time.

Can't Center Text For Newsletter In Mobile

Working on an email blast and for the life of me I cannot get the text to center in mobile view. The URL is: http://strictpixel.com/clients/relevant/fbc/email/
I am referencing the top navigation, under the logo. In mobile, it slides to the left and I am not sure why.
I know this is something simple but I have been pulling my hair out for an hour.
Thanks!
Yeah that really is a mess and you should consider refactoring. There's no way you need all those nested tables.
However, if you plan to keep it this way, the problem is likely stemming from your HTML being invalid. First, the <center> tag is dead and should not be used. Second, you break the flow of your table structure beginning after the comment I inserted below:
<p class="template-label">469-952-6404</p></td>
<td class="expander"></td>
</tr>
</table>
</td>
<!-- You can't start the new table below here without first either
opening a new <td> or closing the <tr> and <table> that is open!! -->
<table class="container">
<tr>
<td class="wrapper">
<table class="twelve columns" style="background-color:#f1f5f8;vertical-align:center;">
...
My best guess is that you missed opening up the next <td> tag just before that table begins.
Use an online HTML validator to help you find where your table structure is broken. Something like http://www.freeformatter.com/html-validator.html may prove useful.

Multiple Tables in One - Misalignment

EDIT: I did not construct this table myself. A table absolutely shouldn't be constructed this way and is a fix I'm implementing in the future. But the back-end code unfortunately depends on this exact table structure-each inner table has it's own class names and id's and trigger functions, etc.
I've got this problem working with a table made up of multiple tables - One table is the table itself, another table makes up the header, or <thead>, and another table makes up the <tbody>-there are also divs within the table cells (<td>) it looks like this:
<div id="myTableContainer">
<table id="myTable">
<thead>
<table id="myTableHeader">
<tr>
<td>
<div>Header Data 1</div>
</td>
<td>
<div>Header Data 2</div>
</td>
</tr>
</table>
</thead>
<tbody>
<table id="myTableData">
<tr>
<td>
<div>Table Data 1</div>
</td>
<td>
<div>Table Data 2</div>
</td>
</tr>
</table>
</tbody>
</table>
</div>
The problem is that there's some javascript working in the background to resize these table cells based on how much text is in them, but I can't align the header cells with the with the rows below them properly with CSS. I've experimented with the table-layout property and giving each td a max/min-width, but I'm stuck as to getting all the data & columns aligned because if many columns are created, the table gradually mis-aligns. What's more, both the inner tables are generated dynamically, so it's not as simple as restructuring the table as a whole. This table has proved very difficult to work with as it was developed for IE5 or 6 (works in Quirks mode all the way)
Does anyone have any ideas or sure-fire solutions on how to align this table properly? Preferably a CSS-based solution?
If you can't picture it, my table basically looks like this (and gets gradually worse if more columns are inside of it)
I hope I explained this well enough, if more info is needed I will provide
You should not have <table> tags inside <thead> and <tbody>. Your code should just look like this:
<div id="myTableContainer">
<table id="myTable" border="1">
<thead>
<tr>
<td>
<div>Header Data 1</div>
</td>
<td>
<div>Header Data 2</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>Table Data 1</div>
</td>
<td>
<div>Table Data 2</div>
</td>
</tr>
</tbody>
</table>
</div>
I would correct the old code but in case you don't intend to, look for below hack:
I cannot think of a pure CSS solution. But how about CopyCSS (http://upshots.org/javascript/jquery-copy-style-copycss)?
You can call your copyCSS (you can selectively copy only width property). Question is how to detect if width of column changes?
For that you will have to take help of onresize event (http://www.w3schools.com/jsref/event_onresize.asp). For that you have to dynamically add onResize event to at least first row of your second (i.e. inside ) table.

Unable to align HTML tables parallel to each other

I have created two HTML grid tables but I am finding difficulty while placing/aligning them parallel to each other.
I am using align = right but the table is getting aligned downwards(one below the other) and not shifting to right in parallel order . Can anyone suggest where I am making mistake in my below code and how can I rectify it?
P.S: My below code issue can be checked by copying and saving it in a notepad say test.txt and renaming it as test.html and open it in IE or Firefox browser.
<table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
<table id="vv" class="easyui-datagrid" style="width:380px;height:auto;" align = "right">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
Here is your solution:
<div style="float:left;"><table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:left;"><table id="vv" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
You mean you want the tables side by side rather than one below the other?
You can either add a float: left to the first table (and not forget to clear after the second table), or put each of the tables in a div and set display: inline-block on those divs.
jsfiddle.net/S45CQ/
use float:left property and either reduce width of the table or put them in a wrapper div.
Also remove two closing body tag from your html.
The align right style on a table will align all elements inside to the right. (text and images etc in each column).
You need to add "float:left;" in the style.
See here: http://jsfiddle.net/TmC4C/
You also need to specify align="left" on your first table. Although you are much better off using floats instead.
I have changed your widths to 50%, as it could also be the widths of the tables are too large for the screen size, causing one to push the other below it.

HTML/CSS table display problems

I'm messing around with the aesthetics of a site I'm building and have been left scratching my head on something that looks like it should be simple, or so I thought.
I am using a table to place the content of my the site into, and when I run it through my local host (Using XAMP) the scale of table <td> tags is how I want it, but when I host it through my godaddy account the <td>s in my main content <tr> are scaled differently (seems to be influenced by the header row).
Here's the link to my current page and you'll see the problem. (BTW the site is not finished so any spelling mistakes and stuff like that feel free to ignore :))
http://www.sittingducksfc.co.uk/
So how would I go about creating evenly sized <td>'s within that row? as you can see the furthest right <td> is squashed to the same scale as the loginbox at the top. I have been fiddling with it for a while but I'm probably missing some simple css but I haven't found any previous question with the same problem.
Regards
Mike
So the problem appears to by your stylesheet... You have the three <td> which all have the width of 33%
I am using Google Chrome 31.0.1650.63m and it shows up fine but other browsers may not, i would suggest to do the following change
<td colspan="1" style="background-color:white;text-align:center;width: 30%;height:30%;">
I would also suggest using a stylesheet as opposed to editing the style in-line
Hi all thanks for your responses.
From trail and error i have gone for a different approach and stacked multiple tables into my main div and that allows me to specify the particular widths of each td within that particular table.
From further investigation it can also be seen
here and i apologize for a repeat question.
Here is my example code.
<div>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="80%"></td>
<td width="20%"></td>
</tr>
</table>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="33%"></td>
<td width="34%"></td>
<td width="33%"></td>
</tr>
</table>
</div>
This can be stacked many times without each table affecting the other.