Question

我正在尝试使用 ElectronJS 为我的工作制作可打印的表格。我编写了一些代码，允许用户通过按下按钮向表中添加新行。理想情况下，当一切都完成并布置好后，我希望能够打印所述表格。

现在唯一的问题是，当我尝试打印表格时，表格的第一列比我希望的要宽。当它在屏幕上显示时，宽度是我想要看到的，但是当我点击打印时，它会将列的宽度更改为比我想要的大得多。

这是表格的 HTML：

function AddRow() {
   // Get ID for table from HTML file
   var table = document.getElementById("table");
   // Count number of columns in table
   var columnNumber = document.getElementById("table").rows[0].cells.length;
   // Add row to last row in table
   var row = document.getElementById("table").insertRow(1);
   // Create Input field in table
   var newInput = document.createElement("INPUT");
   newInput.placeholder = "Enter Text Here";
   newInput.classList.add("TableInput");
   // Add columns to new row matching header
   for (i = 1; i <= columnNumber; i++) {
     row.insertCell(0).appendChild(newInput);
   }
 }

 /* Table Styling */
  #table {
    position: relative; top: 25px;
    font-family: "American Typewriter";
    border-collapse: collapse; width: 75%;
    margin-left: auto; margin-right: auto;
    box-shadow: 2px 2px black; table-layout: fixed;
  }

  .table {
    font-family: "American Typewriter";
    border-collapse: collapse; width: 75%;
    margin-left: auto; margin-right: auto;
  }
  
  #table td, #table th {
    position: relative; text-align: center;
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  #table tr:nth-child(even){background-color: #f2f2f2;}
  
  #table tr:hover {background-color: #ddd;}
  
  #table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: rgba(177, 52, 235, 1.0);
    color: black;
  }

  #item {
      min-width: 150px; max-width: 200px;
  }

  .TableInput {
      width: 100%;
      box-sizing: border-box;
  }

<table id="table">
  <thead>
    <th id="item">Item</th>
    <th>Ounces (Oz)</th>
    <th>Grams (g)</th>
    <th>Fluid Ounces (FOz)</th>
    <th>Milliliters (mL)</th>
    <th>Drops</th>
    <th>Completed</th>
  </thead>
  <tr>
    <td>Total</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

打印 CSS 样式表：

/* Table Styling */
  #table td, #table th, #table tr
  {
    border-collapse: collapse; border: 0.5px solid black;
    width: 100%; text-align: center; font-size: x-small;
  }

任何帮助将不胜感激。谢谢。

更改打印 CSS 表格的列宽

0 个答案: