Make td expand to max width before text wraps - html

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

Related

CSS : page-break-inside: avoid doesn't work in table row

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.

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>

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>

Change layout of page using css only (without changing DOM placement)

I have a structure which cannot be changed due to some reasons.Here is the structure:
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width: 200px; height: 200px; background: #f1f1f1">container</div>
I want to get this particular layout using CSS only, ie. no positions, negative margins etc. The HTML elements will remain in same flow - h1, p and div. Is it possible to do this?

This should work for you. The main thing is to put float: left on the left hand div.
<style type="text/css">
#wrapper {
width: 90%;
}
#container {
float: left;
width: 200px;
height: 150px;
background-color: #666;
margin: 0 10px 10px 0;
}
H1 {
font: bold 2em arial;
}
P {
background-color: #ccc;
}
</style>
<div id="wrapper">
<div id="container">#container</div>
<h1>Heading</h1>
<p>
Some text.
</p>
</div>
Example fiddle

Of course you can do that in CSS only! :)
I know this is an old question, but its a fun challenge. The trick is to create a pseudo element before the h1 that floats left to create the space for the container div.
I'm sure there are many other ways to do this...
div {
position:absolute;
top:0;
}
h1::before {
content:'';
float:left;
width:200px;
height:200px;
margin-left:20px;
}
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width:200px; height:200px; background:#f1f1f1">container</div>