Firefox 中带有行跨度边框问题的 html 表格答案

【问题标题】：html table with rowspan border issue in FirefoxFirefox 中带有行跨度边框问题的 html 表格
【发布时间】：2015-09-29 15:20:43
【问题描述】：

我检查了一些关于表格、FireFox 和边框问题的主题，但仍在寻找答案。我有一个带有rowspan 和bootstrap 的简单表格，但在某些行上，水平边框在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 中尝试过）

【问题讨论】：

我在 chrome、ff 和 ie 中尝试过，它在所有 3 中看起来都一样

标签： html twitter-bootstrap firefox border

【解决方案1】：

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

边框折叠：折叠

桌子上的财产。

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

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

希望对你有帮助

【讨论】：