How to force table size in HTML?

Asked

Viewed 8,461 times

0

I have a table with a background image and I would like to somehow set the size of this table so that the image appears completely.

So far it needs to contain data in the table, but when it has little data it cuts and, depending on the amount, it doesn’t even show. Then there would be some way, regardless of the amount of data, it would show the size of the image?

table {
  page-break-inside: auto;
  width: 100%;
}

tr {
  page-break-inside: avoid;
  page-break-after: auto
}

thead {
  display: table-header-group
}
<table style='background-image:url(http://lorempixel.com/output/city-q-g-600-400-3.jpg);'>
  <thead>
    <tr>
      <td colspan='2'>
        <div style="width:100%;height:90px;"></div>
      </td>
    </tr>
  </thead>
    <tr class="linhas">
      <td style="width:50%;">Dados 1</td>
      <td style="width:50%;">Importante: aadadagdsgsagsa</td>
    </tr>
    <tr class="linhas">
      <td style="width:50%;">Dados 2</td>
      <td style="width:50%;">Importante: aadadagdsgsagsa</td>
    </tr>
    <tr class="linhas">
      <td style="width:50%;">Dados 3</td>
      <td style="width:50%;">Importante: aadadagdsgsagsa</td>
    </tr>
    <tr class="linhas">
      <td style="width:50%;">Dados 4</td>
      <td style="width:50%;">Importante: aadadagdsgsagsa</td>
    </tr>
    <tr class="linhas">
      <td style="width:50%;">Dados 5</td>
      <td style="width:50%;">Importante: aadadagdsgsagsa</td>
    </tr>
</table>

html css

1 answer

2

Yes, for this you can use CSS (width and height). Example:

table {
  background-image: url(https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg);
  background-size: 100% auto;
  color: #caa;
}

tr {
  height: 50px;
}

td {
  width: 100px;
  border:1px solid black;
}
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td>Bons sonhos...</td>
  </tr>
</table>

  • 1

    I added a border for him to view better.

  • @Leonardobonetti thank you :)

  • @Sergio Cara looks at an example of the code https://jsfiddle.net/VitorBueno/ow9jvqx1/9/ This seeing that I put the height: 400px; but let’s say that it is only 50 or 100, ends up cutting the background image, I want it to be printed the size of the background sheet, not that the image itself fits to fit in the table size

  • I put the background image of the table, because sometimes the data goes from more than one page, and so replicates the image to next page, and my problem is just this, when jumps page and does not have enough data to show the full background image, and also when you only have one page and don’t have enough data to show the full background image

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.