在 table 上制作弹出窗口

Question

我想制作一个覆盖 table

的弹出窗口

<!DOCTYPE html>
<html>
<head>
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
    .popover {
      width: 2000px;
    }
    .popover-table th, td {
      padding: 0px 15px;
      white-space:nowrap;
    }
  </style>
</head>
<body>
  <a href="#" data-toggle="popover4">4</a>

  <div id="popover4-html" style="display: none">
    abcdefghi:
    <table class="popover-table">
      <tr></tr>
      <tr>
        <th>alongtitleisverylong</th>
        <th>linked to event3</th> 
        <th>100 lines</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
    </table>
  </div>

  <script>
    $('[data-toggle="popover4"]').popover({
      html: true,
      content: function() {
      return $("#popover4-html").html()
    }});
  </script>
</body>
</html>

JSBin

有两个问题：

1) popover的宽度不能覆盖table

的宽度

2) 我不想加粗第一行table，但我不知道该怎么做

有人能帮忙吗？

Answer 1

您可以使用以下代码

<!DOCTYPE html>
<html>
<head>
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
    .popover {
      width: 2000px;
      max-width:50%
    }
    .popover-table th, td {
      padding: 0px 15px;
      white-space:nowrap;
    }
  </style>
</head>
<body>
  <a href="#" data-toggle="popover4">4</a>

  <div id="popover4-html" style="display: none">
    abcdefghi:
    <table class="popover-table">
      <tr></tr>
      <tr>
        <td>alongtitleisverylong</td>
        <td>linked to event3</td> 
        <td>100 lines</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
    </table>
  </div>

  <script>
    $('[data-toggle="popover4"]').popover({
      html: true,
      content: function() {
      return $("#popover4-html").html();
    }});
  </script>
</body>
</html>

<th> 标签始终将其中的文本加粗，因此我将其替换为 <td> 标签。

弹出框 class 中的最大宽度在 bootstrap.css 中指定为 276px，因此我已将其替换为最大宽度:50%。

在 table 上制作弹出窗口

Make a popover over a table

javascript

css

html-table

twitter-bootstrap

bootstrap-popover