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

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