Print 3 x 3 html table with rectangle cells-CodePudding

I use the following styles to print my 9 x 9 HTML table:

td {
  border: 2px solid;
}

@media print {
  body {
    margin: 0;
    padding: 0;
  }

  table {
    height: 100vh;
    width: 100vw;
  }

  td {
    margin: 20px;
    width: 33.3%;
    height: 33.3%;
  }
}

It works, but I want my cells to have a rectangle shape. How can I achieve this?

CodePudding user response：

You can do like this:

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

<!DOCTYPE html>
<html>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
  <tr>
    <td>Data 7</td>
    <td>Data 8</td>
    <td>Data 9</td>
  </tr>
</table>

</body>
</html>

CodePudding user response：

You can achieve this by using absolute values for width and height. Also you must using absolute width and height for the table.

td {
  border: 2px solid;
}

body {
  margin: 0;
  padding: 0;
}

xtable {
  height: 100vh;
  width: 100vw;
}


 td {
    margin: 20px;
    width: 200px;
    height: 200px;   
  }

<table>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
  <tr>
    <td>Data 7</td>
    <td>Data 8</td>
    <td>Data 9</td>
  </tr>
</table>