找 AI 帮忙改的,不知道是不是最优的方案。
为了实现表头固定居中,而其他单元格可以通过鼠标右键手动修改对齐方式,我们需要结合 CSS 和 JavaScript 来实现。以下是修改后的代码:
CSS 部分
.protyle-wysiwyg .table {
font-size: 24px;
margin: 0 auto; /* 添加这一行 */
}
.protyle-wysiwyg > div.table > div:nth-child(1) > table > thead {
text-align: center;
}
/* 表格表头样式 */
.b3-typography table thead th, .b3-typography table thead td, .protyle-wysiwyg table thead th, .protyle-wysiwyg table thead td {
font-weight: 400;
background-color: var(--b3-theme-background);
text-align: center; /* 确保表头单元格居中对齐 */
}
/* 表格宽度自适应 */
.b3-typography table, .protyle-wysiwyg table {
width: auto;
display: table;
margin: 0 auto; /* 添加这一行 */
}
JavaScript 部分
document.addEventListener('contextmenu', function(event) {
// 阻止默认的右键菜单
event.preventDefault();
// 检查点击的目标是否是表格单元格
if (event.target.tagName === 'TD' && event.target.closest('.protyle-wysiwyg .table')) {
// 提示用户选择对齐方式
const alignOptions = ['left', 'center', 'right'];
const align = prompt('请选择对齐方式(输入 left、center 或 right):', 'left');
if (alignOptions.includes(align)) {
// 将选择的对齐方式应用到单元格
event.target.style.textAlign = align;
} else {
alert('无效的对齐方式,请输入 left、center 或 right。');
}
}
});
解释
- CSS 部分:确保表头单元格居中对齐。
- JavaScript 部分:监听右键点击事件,当点击目标是表格单元格时,提示用户选择对齐方式(左对齐、居中对齐或右对齐),并将选择的对齐方式应用到单元格。
这样,表头单元格将固定居中对齐,而其他单元格可以通过鼠标右键手动修改对齐方式。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于