Javascript 如何在HTML表格中获得这样的布局
我制作了一个简单的响应性HTML表格，并尝试获得如下图所示的布局： 正如你所看到的，我的问题是关于这一年的专栏。现在我需要粘贴空的：Javascript 如何在HTML表格中获得这样的布局,javascript,html,css,Javascript,Html,Css,我制作了一个简单的响应性HTML表格，并尝试获得如下图所示的布局： 正如你所看到的，我的问题是关于这一年的专栏。现在我需要粘贴空的： <th scope="row"></th> 由于这个空HTML标记，整个列都有边框 是否有可能获得如图所示的布局，这也是我的HTML： <div class="table-responsive"> <table class="responsive-table table-bordered ">
<th scope="row"></th>
<div class="table-responsive">
<table class="responsive-table table-bordered ">
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">Short</th>
<th scope="col">Exam</th>
<th scope="col">P</th>
<th scope="col">S</th>
<th scope="col">A</th>
<th scope="col">SJ</th>
<th scope="col">TJ</th>
<th scope="col">PK</th>
<th scope="col">ECTS</th>
</tr>
</thead>
<tbody>
<tr>
<th class="sem" scope="row">1</th>
<td data-title="Short">Lor</td>
<td data-title="Exam">Lorem</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<th scope="row"></th>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<th scope="row"></th>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<th scope="row"></th>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<th scope="row"></th>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)
</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<th scope="row"></th>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<th scope="row"></th>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<th class="sem" scope="row"></th>
<td data-title="Short">-</td>
<td data-title="Exam">Lorem: 1</td>
<td data-title="P">-</td>
<td data-title="S">-</td>
<td data-title="A">-</td>
<td data-title="SJ">-</td>
<td data-title="TJ">-</td>
<td data-title="PK">-</td>
<td data-title="ECTS">-
</td>
</tr>
<tr>
<th scope="row"></th>
<td data-title="Short">-</td>
<td data-title="Exam">Lorem: 1</td>
<td data-title="P">-</td>
<td data-title="S">-</td>
<td data-title="A">-</td>
<td data-title="SJ">-</td>
<td data-title="TJ">-</td>
<td data-title="PK">-</td>
<td data-title="ECTS">-
</td>
</tr>
</tbody>
</table>
</div>
年
短
考试
P
s
A.
SJ
TJ
主键
ECTS
1.
洛尔
洛勒姆
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
母亲
洛勒姆
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
-
洛勒姆：1
-
-
-
-
-
-
-
-
洛勒姆：1
-
-
-
-
-
-
-
下面是我的JSFIDLE:您可以使用javascript对tr子项进行计数，然后插入具有找到的计数值的rowspan属性：
var tbody=document.querySelector（'tbody'）；//寻找尸体
var thscope=document.querySelector（'tbody.sem'）；//在车身内部寻找th.sem
var计数=0；
for（var ch=tbody.firstChild；ch；ch=ch.nextSibling）//将找到tr
if（chinstanceof HTMLElement）计数+++；//我会数一数
thScope.setAttribute（“rowspan”，count）；//计数完成后插入rowspan属性/*再见*/
.sem{border:solid；}
年
短
考试
P
s
A.
SJ
TJ
主键
ECTS
1.
洛尔
洛勒姆
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
母亲
洛勒姆
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
-
洛勒姆：1
-
-
-
-
-
-
-
-
洛勒姆：1
-
-
-
-
-
-
-
var tbody=document.querySelector（'tbody'）；//寻找尸体
var thscope=document.querySelector（'tbody.sem'）；//在车身内部寻找th.sem
var计数=0；
for（var ch=tbody.firstChild；ch；ch=ch.nextSibling）//将找到tr
if（chinstanceof HTMLElement）计数+++；//我会数一数
thScope.setAttribute（“rowspan”，count）；//计数完成后插入rowspan属性/*再见*/
.sem{border:solid；}
年
短
考试
P
s
A.
SJ
TJ
主键
ECTS
1.
洛尔
洛勒姆
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
母亲
洛勒姆
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
母亲
洛雷姆（1/2）
4.
4.
0
0
0
0
0
<html>
<head>
<link rel="stylesheet" type="text/css" href="materialize.min.css">
<link rel="stylesheet" type="text/css" href="personalize.css">
<script type="text/javascript" src= "materialize.min.js"></script>
</head>
<body>
<table class="highlight">
<thead class="corBackgroundThead">
<tr>
<th scope="col">Year</th>
<th scope="col">Short</th>
<th scope="col">Exam</th>
<th scope="col">P</th>
<th scope="col">S</th>
<th scope="col">A</th>
<th scope="col">SJ</th>
<th scope="col">TJ</th>
<th scope="col">PK</th>
<th scope="col">ECTS</th>
</tr>
</thead>
<tbody>
<tr>
<th class="sem" scope="row"></th>
<td data-title="Short">Lor</td>
<td data-title="Exam">Lorem</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<th scope="row"></th>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<th scope="row"></th>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
</tbody>
</table>
</body>
</html>