javascript - 更改打印 CSS 表格的列宽
问题描述
我正在尝试用 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;
}
任何帮助将不胜感激。谢谢你。
解决方案
推荐阅读
- java - 需要帮助从 android studio 中的随机字母生成器广播 logcat
- javascript - Javascript 数组在另一个函数中不起作用(未报告错误)
- react-native - 反应导航不止一个嵌套
- amazon-web-services - 是否可以在 dynamodb 中创建一个没有 GSI 分区键的项目?
- javascript - 在脚本标签中使用 HTML/模板进行 HTML Dom 注入
- python - 下载谷歌图片
- android - Flutter 在 Android Studio 中无限期运行
- javascript - 子集合未通过 Firestore 导出云功能导出
- api - 如何在不登录的情况下保护 REST API
- json - 使用 Axios 发出 post 请求时出现网络错误