CSS : page-break-inside: avoid doesn't work in table row - html
I'm using a PHP script to generate a table to display a measurement result.
It's working well but when printing I have some trouble with page break inside Table row.
The border of the <tr> with the rowspan continues on the footer / header of the page and the page break doesn't work.
I have tried several methods but nothing has changed : page-break-inside : avoid doesn't work in this table.
Have you got an idea? or do you see any mistakes?
Thanks for your help ! :)
Edit :
In fact, After many other tests, page-break-inside : avoid will work if you set display : block.
But display:block will break the table layout :/
How it's possible to do this ?
Thanks
Code :
<!DOCTYPE html>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Style CSS A garder -->
<STYLE>
html,body,h1,h2,h3,h4,h5,h6 {
font-family: "Times New Roman", "Arial", serif;
margin : 0px;
}
table,thead,tbody, tfoot{
border-collapse: collapse;
padding:0 !important;
margin:0 !important;
width : 100%;
}
TD {
padding : 2px;
}
.TrTdEntete{
padding:0 !important;
margin:0 !important;
}
.TableGenerale{
width : 100%;
}
.TableSecondeEntete{
width : 100%;
border: 1px solid black;
}
.TableContenu{
margin-top : 5px;
/*width : 1024px;*/
border: 1px solid black;
}
.TableGenerale td{
height : 30px;
margin-top : 0px;
}
.TableContenu td,th {
height : 30px;
margin-top : 0px;
border: 1px solid black;
}
/* page break ne fonctionne pas !!!*/
tr.page-break-avoid {
page-break-inside: avoid !important;
page-break-before: always !important;
}
td.page-break-avoid {
page-break-inside: avoid !important;
page-break-before: always !important;
}
.imgbanc {
width : 100%;
max-width : 100%;
height : 500px;
border: 1px solid black;
margin-top: 10px
}
.NOK{
color : RED;
}
#contenu{
padding : 5px;
}
#media print {
tr, td{
-webkit-column-break-inside: avoid !important; /* Chrome, Safari, Opera */
page-break-inside: avoid !important; /* Firefox */
break-inside: avoid !important; /* IE 10+ */
}
}
</STYLE>
</HEAD>
<BODY>
<TABLE class="TableGenerale"><THEAD>
<!-- Premiere Entête qui sera afficher à chaque debut de page --><TR><TD class="">[task-XXXX]</TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><TR><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><TR><TD class="" rowspan="1" colspan="3" >Lorem ipsum dolor sit amet</TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><!-- Fin premiére entête --></THEAD><TBODY><!-- Partie affichée une seule fois --><TR><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><TR><TD class="">Bench software version : $version</TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><!-- Fin Partie affichée une seule fois -->
<TR class="TrTdEntete">
<TD class="TrTdEntete"colspan="6">
<TABLE class="TableSecondeEntete">
<THEAD>
<!-- Seconde Entête qui sera afficher à chaque debut de page --><TR><TD class="" rowspan="1" colspan="6" >Lorem ipsum dolor sit amet</TD></TR><TR><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet</TD><TD class="" rowspan="1" colspan="3" >Lorem ipsum dolor sit amet
</BR>Lorem ipsum dolor sit amet</TD><TD class="">STAMP</TD></TR><!-- Fin Seconde entête -->
</THEAD>
<TBODY>
<TR class="TrTdEntete">
<TD class="TrTdEntete" colspan="6" id="contenu">
<TABLE class="TableContenu">
<THEAD>
<!-- Troisiéme entête qui sera présente uniquement dans le tableau du contenu pvri --><TR><TD class="">Lorem ipsum dolor sit amet</TD><TD class="">MEASUREMENT</TD><TD class="">NOMINAL VALUE TOLERANCE</TD><TD class="" rowspan="1" colspan="2" >MEASURED VALUES</TD><TD class="">COMMENTS</TD></TR><!-- fin Troisiéme entête -->
</THEAD>
<tbody>
<!-- Corps du PVRI --><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class=" page-break-avoid" rowspan="2" colspan="1" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class=" page-break-avoid" rowspan="6" colspan="1" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD><TD class=" page-break-avoid" rowspan="1" colspan="2" ></TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD><TD class=" page-break-avoid" rowspan="1" colspan="2" ></TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR class="page-break-avoid" ><TD class=" page-break-avoid" rowspan="5" colspan="1" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD><TD class=" page-break-avoid" rowspan="1" colspan="2" ></TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class=" page-break-avoid" rowspan="15" colspan="1" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><!-- Fin du corps du PVRI -->
</tbody>
</table><!-- Fin de la zone PVRI -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<!-- Footer --><TR><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class="">Lorem ipsum</TD></TR><TR><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class="">June 15/18</TD></TR><!-- Fin Footer -->
</tfoot></table>
</BODY>
</HTML>
Chrome claims to support break-inside: avoid on tr but not td (see https://crbug.com/547972). Have you tried break-inside: avoid-page; instead of page-break-inside: avoid? They are supposed to be aliased, but maybe Chrome has a bug here.
Related
Scrollable child and parent unscrollable
Lets say there is something like this:
<div class="parent">
<div class="child">
</div>
</div>
How to make parent to occupy the entire screen height?
And how to make child to be scrollable, if its height exceeds the parent height(which is screen max height).
I tried something like this:
.parent{
height: 100vh;
}
.child{
overflow: auto;
}
Apply overflow rule to the parent div, see working example below:
html, body {
height: 100%;
margin: 0;
font-family: sans-serif;
}
.parent {
overflow: auto;
height: 100vh;
padding: 10px;
border: 1px solid #ccc;
}
.child span {
height: 100vh;
display: block;
background: gray;
padding: 10px
}
.child span:nth-child(odd) {
background: lightgray
}
<div class="parent">
<div class="child">
<span>Child container 1</span>
<span>Child container 2</span>
<span>Child container 3</span>
</div>
</div>
Instead of your CSS, try to apply this CSS:
html, body{
overflow:hidden;
}
.parent{
height: 100vh;
overflow: scroll;
}
Here is the link to the fiddle supporting it.
html,
body {
overflow: hidden;
}
.parent {
height: 100vh;
overflow: scroll;
}
<div class="parent">
<div class="child">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit
amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing
elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum
dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet,
consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing
elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum
dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet,
consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing
elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit" "Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum
dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit"
</div>
</div>
Outlook signature html
I am trying to make signature in html for my Outlook mail. The problem is that everything looks great in browser but in outlook is too wide. This should look like in the browser. Source code: <!DOCTYPE HTML> <html> <head> </head> <body> <div id="sig" style="min-width: 680px; min-height: 82px; line-height: 18px; padding: 24px 0 0 30px; font-family: Helvetica, Verdana, Arial, Sans-Serif; font-size: 12px; color: #999999;"> <img src="logo.jpg" alt="logo" style="float: left; border: none;" /> </a> <div style="margin-left: 40px; padding-left: 20px;"> <span style="display: block; font-size:13px; color: #404040; margin-bottom: 3px;">Name Surnamek </span> <span style="display: block; font-size:10px; color: #404040; margin-bottom: 3px;">TT Test </span> </div> <div style="padding-left: 0px;"> </br> <strong><a title="TEST" style="color: #404040; text-decoration: none;">Company Name</a></strong> <br /> tel.  +00 (0) 00 – 000 00 00 </br>fax. +00 (0) 00 – 000 00 00</br> </br> Lorem ipsum dolor sit amet</br> Lorem ipsum dolor sit amet, </br> Lorem ipsum dolor sit amet</br> Lorem ipsum dolor sit amet</br> Lorem ipsum dolor sit amet</br> Lorem ipsum dolor sit amet</br> </br> </div> <hr style="width: 680px; float: left;"></hr> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit </br> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit.</br> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit.</br> </div> </div> <div style="clear:both"> </div> </body> </html>
Make td expand to max width before text wraps
I feel like there's a simple way to do this, but I just can't think of/find a solution... I have a <table> that that should scroll-x if it overflows (which it's expected to) The <td> elements are set to max-width: 300px. I want the text in the <td> to wrap ONLY AFTER the <td> has hit the max-width. Right now text is wrapping as soon as the <table> doesn't fit its parent <div>. How can I make the <td> expand to its max width before the text wraps? Here's a fiddle: https://jsfiddle.net/ds99unpz/2/ EDIT: to clarify... If the td doesn't have to be 300px wide to fit the text on one line, I don't want it to be 300px. If the text is too long to fit in a 300px td, THEN I want the td to be 300px wide and the text to wrap.
I updated your JSFiddle. It coerces the tables and cells to act like block's and inline-block's, respectively. Then using a little white-space: nowrap; magic and forcing the table to overflow, we get the desired result. However, the cells aren't all the same height.
.scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
table{
height: 150px;
}
td {
max-width: 200px;
white-space:nowrap;
overflow-x: scroll;
}
<table class="table table-striped">
<tr>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
EDIT:,
Added style="white-space: nowrap" to <td>
HTML:
<table class="table table-striped">
<tr>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
CSS:
.scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
table{
height: 150px;
}
td {
max-width: 200px;
white-space:nowrap;
overflow-x: scroll;
}
Fiddle
Or all css
<table class="table table-striped">
<tr>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
CSS:
.scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
table{
height: 150px;
}
td {
max-width: 200px;
white-space:nowrap;
overflow-x: scroll;
}
Fiddle
Text-overflow not working in IE8+ for table columns
I made a table, using bootstrap. I want to add text limitations. below is the html. The table and its limitations is working fine in chrome and firefox but now working in IE8+.
<table class="table table-striped table-condensed table-bordered dashboard-table">
<thead style="background-color: #F8DAC2; border-bottom: 3px solid #CA6A15; font-size: 12px">
<tr>
<th>Entity</th>
<th>Board Meeting/Other committees of the board</th>
<th>Date</th>
<th>Exceptional Items</th>
<th>Issues</th>
<th>Remarks</th>
<th>Respective Company's CEO/CFO's comment thereto</th>
<th>Approve/Reject Remarks</th>
</tr>
</thead>
<tbody class="text-justify" style="font-size: 12px; font-weight: bold; color: #000;">
<tr>
<th scope="row"> ABNL</th>
<td>Mark</td>
<td>2 Jul 2015</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><i class="fa fa-fw fa-check-circle-o" style="font-size: 20px; color: #007401"></i> Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</td>
</tr>
<tr>
<th scope="row"> ABFNL</th>
<td>Mark</td>
<td>2 Jul 2015</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><i class="fa fa-fw fa-times-circle-o" style="font-size: 20px; color: #CC0001"></i>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</td>
</tr>
<tr>
<th scope="row"> ABFNL</th>
<td>Mark</td>
<td>2 Jul 2015</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td><i class="fa fa-fw fa-times-circle-o" style="font-size: 20px; color: #CC0001"></i>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</td>
</tr>
</tbody>
</table>
and the css class for the same I have made. the original bootstraps I haven't changed.
.dashboard-table tbody tr td{
max-width: 200px ;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
}
IE does not work like that I found the answer or its a work around I don't know but you need to add a div tag inside like below <tr> <td scope="row"> ABNL </td> <td>Mark</td> <td style="width:70px">2 Jul 2015</td> <td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td> <td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td> <td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td> <td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td> <td><i class="fa fa-fw fa-times-circle-o" style="font-size: 20px; color: #CC0001"></i><div style="width: 85%; float: right">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</div></td> </tr> <tr>
Position a image button in a table cell
I want to position my image button to the bottom-right in a table cell but when I insert more/less text I don't want the button to change position. How do I do that? I don't really know how to do it but I'll post my current html code. <table> <tr> <td> <div> <%--<umbraco:Item field="nyhet-1-text" runat="server" />--%> <p><img src=""/></p> <p><strong>News</strong></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <img src="../media/testImage.png" alt="test"/> </div> </td> </tr> /Kristian
You can use float:right; on the the .readMoreButton which will mean the button will always be stuck to the right had side of its parent container. It will be pushed down the page when the content grows.
.readMoreButton{
float:right;
}
<table>
<tr>
<td>
<div>
<p><img src=""/></p>
<p><strong>News</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img src="../media/testImage.png" alt="test"/>
</div>
</td>
</tr>
</table>