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.
Related
I am trying to create an HTML table where there are four columns and any number of rows. Inside this table, the first two columns are just normal cells. The latter two columns can have multiple rows WITHIN a row in the top-level table. My issue is how I can properly align the column separators, even if the length of the content in each cell is variable.
My attempt tries to make use of:
<td colspan=2>
Example of what I am trying to do: https://jsfiddle.net/hurnzhmq/
The things I am missing in the JSFiddle are:
There is no divider between the two rows separating Content3A/Content4A from Content3B/Content4B - I tried using the "bottom-border:none" for the last child, but that did not seem to work.
The column separators between Content3A/Content3B and Content4A/Content4B are not lined up with the header's column separator, and do not touch the ends of the table (there are gaps).
Any advice on how I might go about fixing this would be greatly appreciated!
I think you should use rowspan instead colspan
you can use code below
<html>
<table border=1 >
<tr>
<td>Header1</td>
<td>Header2</td>
<td>Header3</td>
<td>Header4</td>
</tr>
<!-- Content -->
<tr>
<td rowspan="2">Content1</td>
<td rowspan="2" >Content2</td>
<td > Content3A</td>
<td > Content2</td>
</tr>
<tr>
<td > Content3B</td>
<td > Content2</td>
</tr>
</table>
</html>
I'm using this code on my wordpress site but I'm getting odd results. I want to divide the table row into two columns, but I've ended up just gluing an extra bit on the side. what am I doing wrong?
<table>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
this is a test
</td>
<td style="padding:0px;">
as is this
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
</table>
and I get this weird little bit off the edge rather than the split I want:
Is it something to do with the aligned right image content in the table below possibly?
The number of columns in a table must be constant.
Add colspan="2" to your single cells.
A table has as many columns as the row with the most columns in it. If cells are missing from other rows, then they are left out from the rendering and cells are not stretched to fit.
Use colspan to make a cell take up multiple columns.
In your case, you don't appear to have tabular data at all, so don't use a table in the first place.
Your second row is two columns wide, but the remaining rows are still just one column in width. Either add a second column to each of the other rows, or extend the cells in the other columns so that they cover two columns, like this:
<tr>
<td style="padding:0px;" colspan=2>
deleted the content to make this less to read
</td>
</tr>
You'll need to do that for all the rows with just one column.
I have an HTML structure with a list of tables like this
<div ng-repeat="row in rows">
<table>
<td ng-repeat="row2 in rows2">
<tr ng-repeat="col in cols">
{{blablabla}}
</tr>
</td>
</table>
</div>
The table is always quite the same, but Angular just redraw it every times (for each elements in 'rows'), which leads to some performance issues.
Is there a way to tell angular to pre render the table in the middle, and then display the list ?
Hi I need to create my table using like shown in the above image. Here I have given the code I tried. Could some1 please explain me the mistake I have made.
<table border="1">
<tr>
<td colspan="2" >Address
<tr><td>Address1</td><td>Address1</td></tr>
</td>
<td rowspan="2">Name</td>
</tr>
</table>
You scan cells row by row, and you mention a cell in your code as soon as you first hit it. Then you remember any cells that have colspan or rowspan, and when you reach their other parts in other rows, you don't put anything at all.
<table border="1">
<tr><td colspan="2">Address</td><td rowspan="2">Name</td></tr>
<tr><td>Address1</td><td>Address2</td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
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.