異なる幅のtrを持つtableで特定のtrに境界線を引く方法
下記の構造のテーブルで、「値3-1」の下部にテーブルの最大幅で境界線を引きたいのですが、可能でしょうか?
条件として、
・CSSは変更できずstyleの変更しかできない
・境界線以外の見た目は変えない
というものがあります。
仮でtbodyのstyleに境界線の設定をしていますが、これは表示されません。
tableのborder-collapseをcollapseに変更すると境界線は表示されますが
見た目が変わってしまいます。
table {
border-collapse: separate;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
td, th {
display: table-cell;
vertical-align: inherit;
}
th {
background-color: green;
border-color: #3498db;
height: 40px;
color: #fff;
box-sizing: border-box;
text-align: left;
<table>
<thead>
<tr>
<th>項目名1</th>
<th>項目名2</th>
</tr>
</thead>
<tbody>
<tr>
<td>値1-1</td>
<td>値2-1</td>
</tr>
</tbody>
<thead>
<tr>
<th>項目名3</th>
</tr>
</thead>
<tbody style="border-bottom: medium dotted rgb(0, 0, 0);">
<tr>
<td>値3-1</td>
</tr>
</tbody>
<thead>
<tr>
<th>項目名1</th>
<th>項目名2</th>
</tr>
</thead>
<tbody>
<tr>
<td>値1-2</td>
<td>値2-2</td>
</tr>
</tbody>
<thead>
<tr>
<th>項目名3</th>
</tr>
</thead>
<tbody>
<tr>
<td>値3-2</td>
</tr>
</tbody>
</table>