Am trying to use text-overflow:ellipsis inside the <td> tag but it supports only to <div> tag.
Any idea to support for <td> tag?
check what am trying to do
http://phpresult.com/source/share/L9F71379328772
I have Found the Solution by using max-width
<style>
.test
{
white-space:nowrap;
text-overflow:ellipsis;
max-width: 100px;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test">
This is the Long text only applied to div tag
</td>
</tr>
</table>
</body>
Add below code...
td {
display: block; /* or inline-block */
}
or
Use
table-layout: fixed;
or give fixed width to your table
Related
I am adding a feature in my project wherein users can convert their data into pdf, but i am having a problem with css. How can i adjust this div so that it will align in the border of my table? padding and margin does not work since the table cell also adjusts. or a im adding the wrong px? I displayed the table border so that you can see how far the border of the div is. Here's the code
<table border="" style="border-collapse: collapse;font-size:12px;text-align: left;">
<tr>
<td colspan="2">
<b>Email </b>
<div style="display: inline-block;border-bottom:.7px solid black;height:15px;padding:0px;width:200px;overflow:hidden;">
{!! $usermodel->email !!}
</div>
</td>
</tr>
</table>
If you want to align the div with the border of the table, you can add a vertical-align property to the td element with a value of top. This will align the top of the div with the top of the table cell.
You can also try setting the height of the td element to the height of the div plus any additional padding you want to add. This will ensure that the entire div is contained within the table cell.
<table border="" style="border-collapse: collapse;font-size:12px;text-align: left;">
<tr>
<td colspan="2" style="vertical-align: top; height: 30px;">
<b>Email </b>
<div style="display: inline-block; border-bottom: .7px solid black; height: 15px; padding: 7.5px 0; width: 200px; overflow: hidden;">
{!! $usermodel->email !!}
</div>
</td>
</tr>
</table>
Since you are using running styles, on this occasion, I suggest (perhaps could be bettered):-
<table border="" style="border-collapse: collapse;font-size:12px;text-align: left;">
<tr>
<td colspan="2"; style="font-size:18px; padding: 2px" >
<b><sup>Email </sup></b>
<div style="font-size:15px;padding: 2px 0px 2px; border-bottom: 1px solid black; display:inline-block; width: 220px; overflow: hidden;">
{!! $blackmamba#gmail.com !!}
</div>
</td>
</tr>
</table>
Try doing it in an external CSS stylesheet.
I have a table with two columns, left column holds an image and right one some text, I want to make this table responsive so when on mobile both columns hold all the horizontal space and the right column goes below the first column, making it somewhat fluid.
This is my template:
#if(count($mailData['order']['discountcodes']) > 0)
#foreach($mailData['order']['discountcodes'] as $code)
---
<br>
# {{ $code->discount->title }} (-{{ $code->discount->discountPercent }}%)
<table style="width:100%; table-layout:fixed;" >
<tr>
<td class="left_column"><img src="{{ $code->discount->image }}" style="min-width:150px; max-width:150px; min-height:100px; max-height:100px; border:1px solid rgb(150,150,150);"></td>
<td class="right_column"><p>Precio:{{ $code->discount->finalPrice }}</p><strong><p>CÓDIGO: {{ $code->unicode }}</p></strong></td>
</tr>
</table>
<br>
---
#endforeach
#endif
# Total:{{ $mailData['order']['cartTotalPrice'] }}
<br>
<br>
Disruta Tu Compañia,
<br>
{{ env('APP_NAME') }}
#endcomponent
<style>
.left_column{text-align:left; display:inline-block; width:150px;}
.right_column{text-align:left; display:inline-block; vertical-align:top; padding:0px 0px 0px 20px;}
#media only screen and (max-width: 480px)
{
.left_column{width:100% !important; display:block !important;}
.right_column{width:100% !important; display:block !important;}
}
</style>
Normally you can't really do that.
But now with Flexbox you can !
Except that I see your tag "email" and if this is going into an HTML email it will not work.
In fact, to have that working, you should use Flexbox on your <tr> tag
<style>
tr {
display: flex;
width: 100%;
flex-direction: column;
}
td {
width: 100%; // Force 100% width of the table
}
</style>
NB: This can gives unexpected result in complex tables
NB: As I said, this won't work in HTML emails because of email softwares/apps restrictions (no video, no JS, no CSS3, etc)
#media(max-width: 600px) {
tr {
display: flex;
width: 100%;
flex-direction: column;
}
td {
width: 100%;
}
}
<table class="table" width="100%">
<tbody>
<tr>
<th width="169">Some title here</th>
<td width="108">0,55 %</td>
<td width="117">0,41 %</td>
<td width="96">0,46 %</td>
<td width="65">0,40 %</td>
<td width="79">0,51%</td>
</tr>
</tbody>
</table>
Hiho,
I have a problem with princexml.
I need to render pages with a repeating footer.
This onbe works fine, but on every site is only the first line from the footer content is shown.
The footer content is a table with two rows.
The first row has on every cell more than one line.
The problem is that only the first line from the first row is shown and not the whole table.
Does anybody has an idea why?
The HTML-Part from the footer:
<table id="footer" style="height: 67px; width: 100%;" border="0" frame="void" rules="none">
<tbody>
<tr>
<td>#BetreiberDaten</td>
<td style="width: 2%;"> </td>
<td style="width: 40%;">#GesellschafterBeschreibung</td>
<td style="width: 2%;"> </td>
<td>#BankAdresse</td>
</tr>
<tr>
<td style="text-align: center;" colspan="5">#Rechnungsart_#Buchungscode_#Seitenzahl</td>
</tr>
</tbody>
</table>
and the css part(s):
#page {
size: A4;
margin: 15pt;
page-break-before: always;
#bottom {
content: flow(footer);
margin: 0;
}
}
#footer
{
width:100%;
padding:2mm;
text-align:left;
}
#footer td
{
font-size:6pt;
}
div.pdf-footer-page-counter span.pdf-footer-page-counter-page {
font-size: 6pt;
content: counter(page);
}
div.pdf-footer-page-counter span.pdf-footer-page-counter-page-total {
font-size: 6pt;
content: counter(pages);
}
table#footer {flow: static(footer, start);}
I'm working with osCommerce for the first time. I inherited this code, and we'd like to tighten up the new_products page. This is the code for the display:
div class="contentText">
<div class="NewProductsList">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td style="border-bottom:solid 1px #ccc;">
<div class="outer">
<div id="x">
<img src="images/swords-sandals.jpg" alt="Swords, Sandals and Sirens" title="Swords, Sandals and Sirens" width="120" height="180" />
<span class="name-font">
Swords, Sandals and Sirens
</span>
<span class="price-font">$19.00</span>
<br /><br />
Murder, conmen, elephants. Who knew ancient times could be such fun?
<br /><br />
Many of the stories feature Claudia Seferius, the
...read more
</div>
</div>
Then this is my stylesheet (css) code:
<style>
.price-font {
float: right;
color: #000000;
font-size: 18px;
}
.name-font {
font-size: 14px;
font-weight: bolder;
}
.outer {
padding: 10px;
}
#x {
display: inline-block;
}
#y {
width: 82%;
vertical-align: top;
display: inline-block;
}
.NewProductsList tr.alt td #x {
float: right;
}
.NewProductsList tr.alt td {
background-color: #ecf6fc;
}
Any help I could get for tightening up the text so that it's directly next to the image, rather than under it, would be greatly appreciated.
Thanks!
Try adding this to your CSS:
#x > a {
float: left;
}
JSFiddle: https://jsfiddle.net/suomyone/h2j013dx/
Basically, this targets the product link (and image, in this case) and floats it to the left. As a result, the product title and description moves up, right next to the image. You'll have to play around with the margins or paddings to achieve the desired spacing between the image and text.
Was this the effect you were looking to get?
Ps. Your HTML is missing some closing tags, specifically </td>, </tr>, </table>, and two </div> tags. I added these to the JSFiddle demo.
In my table I am trying to change the font size. I have tried adding font size in the tag, adding it in the CSS code for the Myposts class, but nothing prevailed. How can I change the font size?
<table width="100%" border="0" class = "Myposts"; align="center" cellpadding="3" cellspacing="1" bgcolor="#686868 " >
<tr>
<td width="6%" align="center" bgcolor="#505050 " ><strong>#</strong></td>
<td width="53%" align="center" bgcolor="#505050 "><strong>Job Description</strong></td>
<td width="15%" align="center" bgcolor="#505050 "><strong>Views</strong></td>
<td width="13%" align="center" bgcolor="#505050 "><strong>Replies</strong></td>
<td width="13%" align="center" bgcolor="#505050 "><strong>Date/Time</strong></td>
</tr>
you can select table cells in CSS
table.Myposts tr td {
font-size: 18px;
}
.Myposts td {
font-size: 20px;
}
example in jsfiddle: http://jsfiddle.net/Wk28Y/
Please don't consider this an answer, just a different way of thinking about the issue. FIDDLE
You could get rid of the "bold" line by making the first row <th> instead of <td>.
Add the css table styling to your Myposts class.
You note in the title that it is php, but I don't see any php tags. So I assume you're passing php to an html page, thus the css styling would still work for you.
HTML
<table class = "Myposts">
<tr>
<td>#</td>
<td>Job Description</td>
<td>Views</td>
<td>Replies</td>
<td>Date/Time</td>
</tr>
</table>
CSS
table {
width: 100%;
border: 0px solid black;
background-color: #686868;
border-spacing: 1px;
}
table td {
background-color: #505050;
color: white;
text-align: center;
font-weight: bold;
padding: 3px;
font-size: 20px;
}
table tr td:nth-child(1) {
width: 6%;
}
table tr td:nth-child(2) {
width: 53%;
}
table tr td:nth-child(3) {
width: 15%;
}
table tr td:nth-child(4) {
width: 13%;
}
table tr td:nth-child(5) {
width: 13%;
}