How to force the size of a table in HTML?

Navigation
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 you need to contain data in the table, but when you have little data it cuts and, depending on the quantity, it does not even show. So would it have any way, regardless of the amount of data, to show itself as the image size? 

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>
    
asked by anonymous 10.08.2017 / 21:04

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>
    
10.08.2017 / 21:11
Check if there is a key in the / json array How to translate website automatically