

下記の構造のテーブルで、「値３－１」の下部にテーブルの最大幅で境界線を引きたいのですが、可能でしょうか？

条件として、  
・CSSは変更できずstyleの変更しかできない  
・境界線以外の見た目は変えない  
というものがあります。

仮でtbodyのstyleに境界線の設定をしていますが、これは表示されません。  
tableのborder-collapseをcollapseに変更すると境界線は表示されますが  
見た目が変わってしまいます。

[code]

    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;
[/code]

[code]

    <table>
    <thead>
      <tr>
        <th>項目名１</th>
        <th>項目名２</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>値１－１</td>
        <td>値２－１</td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th>項目名３</th>
      </tr>
    </thead>
    <tbody style="border-bottom: medium dotted rgb(0, 0, 0);">
      <tr>
        <td>値３－１</td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th>項目名１</th>
        <th>項目名２</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>値１－２</td>
        <td>値２－２</td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th>項目名３</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>値３－２</td>
      </tr>
    </tbody>
    </table>
[/code]


CC BY-SA 3.0
2018-04-13T02:31:51.557
43194
2020-09-18T04:04:25.247
2018-04-13T02:42:33.743
10722
10722
question
css
異なる幅のtrを持つtableで特定のtrに境界線を引く方法

[code]

    <tbody style="box-shadow: 0 -2px 0 red inset;">
    
[/code]

境界線ではないが、見た目は線に見える案です。  
dottedは無理ですが。


CC BY-SA 4.0
2018-10-10T05:31:34.587
49123
2018-10-10T05:31:34.587
12727
43194
answer