How to not vertically overflow table cells and print the table? - css

Question

I know there are a lot of questions about that, but none of their solutions worked for me.
I have an html page formed by only a table (that I want print), I want the table to perfectly fit inside an horizontal a4 sheet.
This is my table without text (is a match referee):
(source: i.ibb.co)
The problem is that when I add some text the height changes.
I tried adding div inside td with an height, but this doesn't work well...
Also I would like to know how to print the page horizontally, cause my table overflow the printing area...
This is an example of my table:
<table>
<tr>
<td>
<div>BLABLABLA</div>
</td>
</tr>
...
...
...
</table>

Answer 1

I would suggest to use table-layout: fixed to manage size of your table and cells. Then as shown in example below manage overflows.
Which gives you stretched table, which wont adapt height to content.
.myTable {
table-layout: fixed;
width: 100%;
height: 100%;
}
.myTable tr td div{
overflow: hidden;
border: 1px solid #333;
height: 20px;
}
.myTable tr.higher td div {
height: 40px;
}
<table class="myTable">
<tr>
<td><div>A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.</div></td>
<td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
</tr>
<tr class="higher">
<td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
<td><div>A lot of text to display. A lot of text to display.</div></td>
</tr>
</table>
You can insert it into #media print and adjust properly to your table.
References:
Media Queries
Position Fixed