我正在尝试使用 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;
}
任何帮助将不胜感激。谢谢。