Search code examples
csshtmlhtml-tableoverflow

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

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):

myTable
(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>
Solution

  • 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: