设置HTML表元素的样式，使其边框的较厚部分受到列span和行span的影响

Question

基本上，我的表看起来像这样：

______________________________________________________
|____|___________|___________|___________|___________|
|    |__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|
|____|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|
|    |__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|
|____|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|
|    |__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|
|____|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|

我希望它能对粗线(箭头所示的线(的归属产生更大的影响：

_____v___________v___________v___________v___________v
🡖|____|___________|___________|___________|___________|
|    |__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|
🡖|____|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|
|    |__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|
🡖|____|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|
|    |__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|
🡖|____|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|__|

是否可以在不必编写Javascript函数的情况下使这些线条变粗，该函数可以确定每个单元格是否需要在其一侧加粗边框？

Answer 1

不幸的是，如果没有JavaScript，这似乎是无法实现的。下面是一个简短的脚本，演示脚本如何完成这项工作。

数组nums定义了要生成的表的格式：[row-groups, rows-per-groups, col-groups, cols-per-group]。生成函数mktable()和行装饰器函数tbllines()都引用相同的nums数组：

const tbl=document.querySelector('table'), nums=[3,2,5,4]
tbl.innerHTML=mktable(...nums);
tbllines(tbl,...nums);
function tbllines(tbl,n1,n2,m1,m2){
[...tbl.children[0].children].forEach((r,i)=>{
let cols=[...r.children];
if (i) // as of second row:
cols.forEach((c,j)=>{
if (i%n2==1) c.classList.add("top")
if (j%m2==[i%n2==1?1:0]) c.classList.add("left");
});
else   // header row:
cols.forEach((c,j)=>{
if (j) c.className="left";
});
})
}

function mktable(n1,n2,m1,m2){
return '<tr>'
+[['<td></td>'].concat(Array(m1).fill('<td colspan="'+m2+'"></td>')).join('')]
.concat(Array(n1*n2).fill(Array(m1*m2).fill('<td></td>')).map((r,i)=>[i%n2?'':'<td rowspan="'+n2+'"></td>'].concat(r).join(''))).join('</tr>n<tr>')+'</tr>';
}

td {width:20px; height:20px; border:1px solid grey}
td.left {border-left: 2px solid blue}
td.top  {border-top: 2px solid blue}

<table></table>