I've been working on this all day and have tried every possible solution I could find but nothing seems to be working. Here's a copy of my code (using Smarty template system):
<tr><td style="border-top: none;">
<table>
<tr><th colspan="7">TITLE OF THE TABLE</th></tr>
{foreach from=$data.history item=tmp name=item}
<tr><td colspan="1" class='{cycle name=color values="odd,even"}'>{$tmp->history}</td></tr>
{/foreach}
</table>
</td><tr>
If you looks in the foreach statement you'll see that I'm trying to create a new td for each piece of information. This is actually working. However, the problem is that it's not spanning them in the table like I want it to do.
I want each td to have its own column and for there to be a maximum of 7 columns. As of right now, there's only one column showing and every is just split between rows.
Ideally, I want there to be 7 columns per row, even if some of them have to be empty because there's not enough data to pull. Is there any way to do this?
I think you are missing a final </tr>
<tr><td style="border-top: none;">
<table>
<tr><th colspan="7">TITLE OF THE TABLE</th></tr>
{foreach from=$data.history item=tmp name=item}
<tr><td colspan="1" class='{cycle name=color values="odd,even"}'>{$tmp->history}</td></tr>
{/foreach}
</table>
</td><tr>
^^^ ------------> should be </tr>
Related
I'm trying to achieve a table with expandable rows.
This is the code i have so far.
<table id="something" class="table table-responsive table-condensed table-striped">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php
foreach ($info as $var) {
?>
<tr data-toggle="collapse" data-target="#accordion<?php echo $var['id'] ?>" class="clickable">
<td><h4><?php echo $name ?> </h4></td>
<td class="<?php echo $colors[array_rand($colors)] ?>">Status</td>
</tr>
<tr>
<td colspan="2">
<div id="accordion<?php echo $var['id'] ?>" class = "collapse">
</div>
</td>
</tr>
<?php
}
?>
</tbody>
The table loads without any problem.
My goal is to sort either by Status or Name, and use a few more options of DataTables.
As soon as I load DataTables I get the following error: Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
Any idea what can be causing this?
Thanks in advance.
I had this same thing and none of the ideas above fixed it for me. This one was a bit of head scratcher until I got it figured out.
My table has only two columns and I'm using a <tr><td colspan="2"><td></tr> from time to time. The table is syntactically correct. I'm using the colspans to separate logical sections of data.
The error comes from the fact that I'm using HTML5 data attributes on the <td> tags. Specifically the data-order attribute. In this case Datatabes does not support colspans on <td> tags.
To get this to work properly for me I replaced the <td colspan="2"> tag with two <td> tags that included the data-order attributes. I used the same attribute value for the row coming next so that the order doesn't get wonky when the order is changed.
Hope that helps someone!
I don't know why yet, but it seems to be related to the "table-stiped" class. Solution, right after your javascript code to "convert" your table to a DataTable you can add the class "table-striped" and that will work, like this:
$('#something').addClass("table-striped");
Edit: Added example below.
I have the following code (simplified for example) which I send as newsletter:
<table width="700">
<tr>
<td width="700"><!-- Really trying to set 700 as max) -->
<table width="700"> <!-- simple table content, not bigger than 700 --></table>
<table width="350"> <!-- simple table content, not bigger than 350 --></table>
<table width="350"> <!-- simple table content, not bigger than 350 --></table>
</td>
</tr>
</table>
Expected result:
[------ table 700 ------]
[ table 350 ][ table 350 ]
Result in Windows Live Mail: (working fine in Mac's Mail)
[------ table 700 ------][ table 350 ][ table 350 ]
It's all in 1 row, though the wrapping TD and table are set to 700, I'm expected it starting on new lines.
I can not add breaks, this is dynamic code, I have more parts, and I dont know in the code which is the last of a line.
I can't find topics about this, other than "start sending mails, with tables"-novice solutions.
Anyone got a clue?
The problem/solution is using align="left". Any table with align=left will have the next table stuck to it. Example of prefered result:
[---- 100 ----]
[--50--][--50--]
[25][25][25][25]
If all those tables have align="left", it would result in one long line:
[---- 100 ----][--50--][--50--][25][25][25][25]
I removed the align=left from the first table, which results like this:
[---- 100 ----]
[--50--][--50--][25][25][25][25]
I can'r remove the align=left from the other tables, because I want those inline-block. In order to get them properly, I added a 'split' in my code. The split-table is a table without the align=left and no height. All tables haves align=left, apart from the split:
[---- 100 ----](split)
[--50--][--50--](split)
[25][25][25][25]
Add style="display:block;" to your top table.
However you'd be better off putting them into their own <td>'s instead of float/aligning them there.
Like this:
<table width="700" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#eeeeee">
...
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="350" bgcolor="#cccccc">
...
</td>
<td width="350" bgcolor="#dddddd">
...
</td>
</tr>
</table>
</td>
</tr>
</table>
Here is a similar question/answer here that explains another issue you'd likely face with aligning tables like you have.
If you are trying to go responsive, you can use <td>'s with display:block; instead to make them 'pop' down when the media query triggers. Example here
I have a question regarding smarty templates, I'm using PHP and Smarty in order to generate pages. I would like to somehow count or determine first and last row of table. So I can set different CSS for first and last TR or leave it as it is, if it's only 1 TR.
Hope it makes sense what im after. Thanks in advance.
<table class="table-paddings-2" cellspacing="0" cellpadding="0">
<tr>
<th class="table-gray-th-noborder">Search Type</th>
<th class="table-gray-th-noborder">Average Turnaround Time</th>
</tr>
{foreach key=obk item=row from=$report}
<tr>
<td class="td-border-top-only text-align-left">{$row.SearchName}</td>
<td class="td-border-top-only text-align-left">{$row.tt}</td>
</tr>
{/foreach}
</table>
Documentation is your friend: http://www.smarty.net/docsv2/en/language.function.foreach.tpl
Examples 7.12, 7.13:
{* show LATEST on the first item, otherwise the id *}
<table>
{foreach from=$items key=myId item=i name=foo}
<tr>
<td>{if $smarty.foreach.foo.first}LATEST{else}{$myId}{/if}</td>
<td>{$i.label}</td>
</tr>
{/foreach}
</table>
I want to draw every 7 images inside row, how make it by Smarty?
<table width="838" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
{section name=index loop=$ArrGallery}
<tr>
<td>
<img src="{$ArrGallery[index].gallery_path}" width="150" height="100" style=" position:relative; z-index:1; padding:7px;"/>
Delete
</td>
</tr>
{/section}
</table>
Instead of a table with a fixed number of cells per row, use css's float property. The objects you float will stack themselves onto the left side of their container until they fill it, then fill the next row, and so on. By adjusting the width of the container, you control the number of items per row. For example:
<div style="width:560px;">
{section name=index loop=$ArrGallery}
<img src="{$ArrGallery[index].gallery_path}" style="float:left;width:150px;height:100px;padding:7px;"/>
{/section}
</div>
Adjust the div's width until 7 images fill each row (except perhaps the last row).
If I have these two tables:
<table>
<tr>
<td>Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
How can I make it so that the two columns have the same width?
I can't combine the tables so thats not an option. I also can't use fixed widths since its dynamic content. Any ideas? Perhaps something in javascript to have the top columns match the width of the lower table? I'm no js expert so I have no idea if thats possible or how to do it. Php is an option on the table as well if theres a way to use that to solve it as well.
Are you able to define css for this dynamic content? Suppose these tables were nested inside a div like so:
<div id="content">
<table>
<tr>
<td>Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
</div>
I would write some css like this:
#content table td { width: 80%; }
I would use a percentage-based width on the 'flowing' column, and buffer it with fixed-width columns if necessary. ie.:
<table style="width: 100%;">
<tr>
<td style="width: 80%;">Small Length Content</td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td style="width: 80%;">Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
You can use CSS to accomplish this. You will have to have the longer content wrap.
td{
width:80%;
}
Try
<table>
<tr>
<td style="width:200px">Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
or add a class to name to the td element and define the style somewhere else like an external file or in header style