-1

I want to make a popover that covers a 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

There are two problems:

1) the width of the popover cannot cover the width of the table

2) I don't want to bold the first row of the table, but I don't know how to do it

Could anyone help?

SoftTimur
  • 5,630
  • 38
  • 140
  • 292

1 Answers1

0

You can use the following code

<!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>

The <th> tag will always bold the text within it so i have replaced it with <td> tag.

The max-width in the popover class has been given as 276px in the bootstrap.css so i have overridden that by replacing it with max-width:50%.

GraveyardQueen
  • 771
  • 1
  • 7
  • 17
  • Thank you... I have several popovers in the same page, what should I do if I want to specify `max-with: 50%` only for `popover4-html`? I tried to write `#popover4-html .popover { ... }` (and `.popover #popover4-html { ... }`) rather than `.popover { ... }`, it does not work... – SoftTimur Nov 13 '16 at 05:14
  • I got it... need to wrap a class around `4`... – SoftTimur Nov 13 '16 at 05:27
  • "The tag will always bold the text within it so i have replaced it with tag." **Ever heard of CSS?** – connexo Nov 13 '16 at 07:30
  • yes i have heard of it but why would i want to prevent the default behaviour of a table heading tag by using a css on a th tag – GraveyardQueen Nov 13 '16 at 07:32