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
Related
I am using mpdf library to generate PDF from HTML.I came across the limitation of mpdf that we cannot use block level elements inside table.Is there any possible way to make mpdf work with following code?. I tried span instead of p but its not act like block level elements.
<table style="width:100%; table-layout:fixed">
<tr>
<td>
<p style="text-align:left;font-size:14px;font-family:Arial;padding-left:105px;">Some text</p>
<p style="text-align:left;font-weight:normal;font-size:14px;font-family:Arial;padding-left:125px;">Some text Some text Some text </p>
</td>
</tr>
</table>
The styles of Block level elements inside table,td won't reflect in PDF.I have fixed above issue with using another table by following.Hope it will help someone.
<table style="width:100%; table-layout:fixed">
<tr>
<td>
<table>
<tr>
<td style="text-align:left;font-size:14px;font-family:Arial;padding-left:105px;">
Some text
</td>
</tr>
<tr>
<td style="text-align:left;font-weight:normal;font-size:14px;font-family:Arial;padding-left:125px;">
Some text Some text Some text
</td>
</tr>
</table>
</td>
</tr>
</table>
Is there a way to display two HTML tables side by side in a PDF-document generated with TCPDF?
I tried inline-CSS but neither float: left nor display: inline-block works.
I am using version 6.2.12.
You should try merging two table inside another parent table like:
<table>
<tr>
<td>
<table>
<tr>
<td>data that you want to display left</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>data that you want to display right</td>
</tr>
</table>
</td>
</tr>
</table>
add this html to variable and then pass that variable into tcpdf menthod writeHTML().
mPDF: Hide table row (CSS display:none) not work.
Do you have any suggest?
My code:
<table align="center">
<tr style="display:none">
<td valign="top" align="left">InfoOption1:</td>
<td valign="top" align="left" colspan="2">#InfoOption1</td>
</tr>
</table>
I feel very dirty for posting this suggestion, but it's the best I got working:
<tr><td>...</td></tr>
<div style="display: none;">
<tr><td>...</td></tr>
</div>
The DIV is the working part. Luckily, html validnes for seo isnt relevant for mPDF
It works if you enclose the row you want to hide inside a Div. The div will have a class which have declared hidden property.
<div class='hide_this_row'>
<tr>
<td>...</td>
</tr>
</div>
<!-- CSS file will look like this -->
<style>
.hide_this_row{
display :none;
}
</style>
Hi
I have a table in which my row contains the text which i retrieve from the database.But i have a small width of row and the data i retrieve is large.And the text exceeds the width of my row so i want to break the data i retrieve into multi lines inside the table row.How can i do it.
My code is here:
$list = $mfidao1->fetchMfi($_GET['id']);
//print_r($list);
//die;
if(!empty($list))
{
foreach($list as $menu)
{
?>
<tr style="border:none; background-color:#FBFBFB;" >
<td class="topv">Social Mission</td>
<td class="topm" ><div class="txt"><?php echo $menu->mfi_1_a;?></div></td>
</tr>
<tr bgcolor="#E8E8E8">
<td class="topv">Address</td>
<td class="topm"><?php echo $menu->mfi_ii_c;?></td>
</tr>
<tr bgcolor="#FBFBFB">
<td class="topv">Phone</td>
<td class="topm"><?php echo $menu->mfi_ii_e;?></td>
</tr>
<tr bgcolor="#E8E8E8">
<td class="topv">Email</td>
<td class="topm"><?php echo $menu->mfi_ii_d;?></td>
</tr>
<tr bgcolor="#FBFBFB">
<td class="topv">Year Established</td>
<td class="topm"><?php echo $menu->mfi_i_c;?></td>
</tr>
<tr bgcolor="#E8E8E8">
<td class="topv">Current Legal Status</td>
<td class="topm"><?php echo $menu->mfi_i_d;?></td>
</tr>
<tr bgcolor="#FBFBFB">
<td class="topv">Respondent</td>
<td class="topm"><?php echo $menu->mfi_ii_a;?></td>
</tr>
<?php
}
}
?>
</table>
Set width of <td>. I think this is the best way to do this rather than word_wrap().
In your css for the table, use "table-layout:fixed" - This fixes the td elements width according to the way you want.
" word-wrap: break-word; " - this breaks the text in it so that it doesnt go beyond the boundary of the box.
You need to wrap the text in your td tags. Here is a link to a similar question
You could use the function wordwrap().
It wraps a string to a given number of characters using a string break character.
you can either use the php function
php wordwrap
or styling the td with css so that it uses the word-wrap attribute
css wordwrap
Not sure if this is what you want, but sound like you could use chunk_split()
I have a table with header on it. I need the header to be fixed when the user scrolls the table data.
my table is as follows
<div style="height: 300px;overflow: auto">
<table>
<thead>
<tr>
<th> Nr. </th>
<th> Name </th>
<th> Status </th>
<th> Date </th>
</tr>
</thead>
<tbody>
<tr>
<?php while($record = odbc_fetch_array($result)) { ?>
<td> <?php echo$record['Nr']; ?></td>
<td> <?php echo$record['Name']; ?></td>
<td> <?php echo$record['Status']; ?></td>
<td> <?php echo$record['Date']; ?></td>
<?php }?>
</tr>
</tbody>
</table>
</div>
Let me know if you need more information.
your syntax is wrong.
this will not work.
you have to put the table head inside section. not .
then you can define overflow: auto and a fixed height to tbody and you will be able to scroll inside the table.
<table>
<thead>
... heading
</thead>
<tbody style="height: 100px; display: block; overflow: auto; ">
... bodycols
</tbody>
</table>
something like that, but pleas s dont do this.
its very unreliable.
please do two seperate tables, wrap them inside a div and make one div fixed height and overflow auto. two more links:
http://www.cssplay.co.uk/menu/tablescroll.html
http://www.imaputz.com/cssStuff/bigFourVersion.html
To begin, your code is wrong.
The Tr with th's must be wrapped with a thead, the other ones by a tbody.
Then, you should watch the source code of this page
If you set a fixed height on the table, if it doesn't have content or very few rows, they will expand to be very high and fill the space. I don't know if that's what you want.
This solution might work for you depending on the style of your headers.
http://salzerdesign.com/blog/?p=191