HTML表格外部边框多行TR。

Question

我有一个包含一些具有rowspan的行的HTML表格，td的简单边框为1像素实心黑色，但我需要在具有rowspan的行组上加粗边框。抱歉我的英语不好，我将添加一张图片以更清楚地说明。

这就是我需要制作的表格：

我尝试添加了以下内容:

table tr{
  border: 2px solid black;
}

但是它也会使没有rowspan的行变得更加厚实。
是否有人能提供CSS或JS的解决方案？

table{
  border-collapse: collapse;
  text-align: center;
}
table td, table th{
  border:1px solid black;
  padding: 0px 14px;
}

<table>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
  </tr>
  <tr>
    <td rowspan="3">val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td rowspan="3">val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td rowspan="3">val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
</table>

- edisonmecaj

---

你能修改你现有的标记吗？ - undefined

Answer 1

如果你可以修改你实际的标记，你可以使用多个 tbody 元素，然后进行样式设置。

table {
  border-collapse: collapse;
  text-align: center;
}
table td,
table th {
  border: 1px solid black;
  padding: 0px 14px;
}
table tbody {
  border: 4px solid black;
}

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">val</td>
    </tr>
    <tr>
      <td>val</td>
      <td>val</td>
    </tr>
    <tr>
      <td>val</td>
      <td>val</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="3">val</td>
    </tr>
    <tr>
      <td>val</td>
      <td>val</td>
    </tr>
    <tr>
      <td>val</td>
      <td>val</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="3">val</td>
    </tr>
    <tr>
      <td>val</td>
      <td>val</td>
    </tr>
    <tr>
      <td>val</td>
      <td>val</td>
    </tr>
  </tbody>
</table>

---

如果您无法修改实际的标记，并且可以使用Jquery，可以按如下方式进行操作：

$(document).ready(function() {
  //Remove the actual tbody
  $('tr').unwrap();

  //Give the th a thead element
  $('th').first().parent('tr').wrap('<thead></thead>');

  //Evaluate wich td has rowspan and wrap on tbody based on number of rowspans
  $('td').each(function() {
    if ($(this).attr("rowspan") != undefined) {
      var numb = parseInt($(this).attr("rowspan"), 10),
          par = $(this).parent('tr').index('tr');
      $("tr").slice(par, par + numb).wrapAll('<tbody></tbody>')
    }
  })
})

检查代码片段。

$(document).ready(function() {
  $('tr').unwrap();
  $('th').first().parent('tr').wrap('<thead></thead>');
  $('td').each(function() {
    if ($(this).attr("rowspan") != undefined) {
      var numb = parseInt($(this).attr("rowspan"), 10),
        par = $(this).parent('tr').index('tr');
      $("tr").slice(par, par + numb).wrapAll('<tbody></tbody>')
    }
  })
})

table {
  border-collapse: collapse;
  text-align: center;
}
table td,
table th {
  border: 1px solid black;
  padding: 0px 14px;
}
table tbody {
  border: 4px solid purple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
  </tr>
  <tr>
    <td rowspan="3">val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td rowspan="3">val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td rowspan="3">val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
  <tr>
    <td>val</td>
    <td>val</td>
  </tr>
</table>

- DaniP

---

这看起来非常有用，但实际的标记已经从一个JavaScript函数修改为将相同的单元格合并为一个具有rowspan属性的单元格。 - undefined

@djsony90，好的，你发布的标记是在js函数之后吗？...你能使用jQuery吗？ - undefined

我使用了你的想法 $(this).attr("rowspan") != undefined 但进行了简化。https://jsfiddle.net/eduh7hsg/2/ - undefined