Question

我检查了几个关于表格，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中试过）

Answer 1

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

border-collapse：collapse

表上的

属性。

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

查看此codepen以及http://codepen.io/anon/pen/avBgXN

希望这有帮助

在Firefox中使用rowspan边框问题的html表

1 个答案: