Print 3 x 3 html table with rectangle cells

Question

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?

don't use percentages. – Daniel A. White May 18 '22 at 13:05 — Daniel A. White, May 18 '22 at 13:05
try 33vh and 33vw width height for td – Mehdi May 18 '22 at 13:21 — Mehdi, May 18 '22 at 13:21

Sumit Sharma · Answer 1 · 2022-05-18T13:19:34.860

0

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>

edited May 18 '22 at 13:19

answered May 18 '22 at 13:13

Sumit Sharma

1,192
1
4
18

The question wasn't about creating a 3x3 table. It was about taking a 9x9 table and making it 3x3 when printing. Without the markup, this is unanswerable. – Kameron May 18 '22 at 13:19
@Kameron Where it is mentioned that from 9X9 table we have to make 3X3 he is just asking how to make cells rectange in 3X3 – Sumit Sharma May 18 '22 at 13:21

score 0 · Answer 2 · answered May 18 '22 at 13:23

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>

Print 3 x 3 html table with rectangle cells

2 Answers2