table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1.5px solid black;
padding: 5px;
}
table img {
max-width: 150px;
height: auto;
}
<!-- //图片大小调整 -->
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
}
.popup img {
max-width: 100%;
max-height: 100%;
cursor: zoom-out;
}
.sticky-header {
position: sticky;
top: 0;
background-color: #f5f5f5; /* 可根据需要设置背景色 */
}
<!-- //放大图片设置 -->
</style>
</head>
<body>
<div>
<
button onclick="addRow()">新增一行</
button>
<
button onclick="addColumn()">添加一列</
button>
<
button onclick="deleteRow()">删除行</
button>
<
button onclick="deleteColumn()">删除列</
button>
<
button onclick="changeSize()">调整大小</
button>
<div>
<div id="popup" class="popup" style="display: none;">
<img id="popupImg">
</div>
<table id="myTable">
<thead class="sticky-header">
<tr>
<td contenteditable="true"><
input type="text" on
input="filterTable(0)" placeholder="工艺膜层"></td>
<td contenteditable="true"><
input type="text" on
input="filterTable(1)" placeholder="AOI Step"></td>
<td contenteditable="true"><
input type="text" on
input="filterTable(2)" placeholder="不良类型"></td>
<td contenteditable="true"><
input type="text" on
input="filterTable(3)" placeholder="Layer(Code)"></td>
<td contenteditable="true"><
input type="text" on
input="filterTable(4)" placeholder="
Type"></td>
<td contenteditable="true"><
input type="text" on
input="filterTable(5)" placeholder="Dpet"></td>
<td contenteditable="true"><
input type="text" on
input="filterTable(6)" placeholder="Subcode"></td>
<td contenteditable="true">Code描述</td>
<td contenteditable="true">Image1</td>
<td contenteditable="true">Image2</td>
<td contenteditable="true">Image3</td>
<td contenteditable="true">Image4</td>
<td contenteditable="true">Image5</td>
<td contenteditable="true">Image6</td>
<td contenteditable="true">判定细则</td>
</tr>这个表格中怎么调整列宽
扫一扫
1505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
