html table Firefox 中的 rowspan 边框问题

Question

我检查了几个关于 tables、FireFox 和边界问题的主题，但仍在寻找答案。我有一个带有 rowspan 和 bootstrap 的简单 table，但在某些行上，水平边框扩展到 rowspan 列之后的下一个。 FireFox 有任何解决方法吗？

<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Lorem</th>
          <th>Lorem ipsum dolor sit amet</th>
          <th>Lorem ipsum dolor sit amet</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2">3</td>
          <td>Lorem ipsum</td>
          <td rowspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
          <td rowspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        </tr>
        <tr>
          <td>dolor sit amet</td>
        </tr>
        <tr>
          <td rowspan="2">3</td>
          <td>Lorem ipsum</td>
          <td rowspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
          <td rowspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        </tr>
        <tr>
          <td>dolor sit amet</td>
        </tr>
        <tr>
          <td rowspan="2">3</td>
          <td>Lorem ipsum</td>
          <td rowspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
          <td rowspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        </tr>
        <tr>
          <td>dolor sit amet</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>

举个例子http://codepen.io/AlexanderStepchkov/pen/vNyzez 在 Firefox 和其他浏览器中检查它（我在 IE11 和 Chrome 中尝试过）

Answer 1

我能找到的是；问题是由于

border-collapse: collapse

属性 table。

尝试table { border-collapse: separate !important;}

也看看这个codepen http://codepen.io/anon/pen/avBgXN

希望对您有所帮助

html table Firefox 中的 rowspan 边框问题

html table with rowspan border issue in Firefox

html

firefox

border

twitter-bootstrap