做一個酥料餅在一個表

-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; 
    } 
    .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）酥料餅的寬度不能覆蓋表的寬度

2）我不想大膽的表的第一行，但我不知道該怎麼做

任何人都可以幫忙嗎？

來源

2016-11-13 SoftTimur

您可以使用下面的代碼

<!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>標籤取而代之。

在bootstrap.css中，彈出窗口類中的最大寬度爲276px，所以我將其替換爲max-width：50％。

來源

2016-11-13 05:00:46 GraveyardQueen

謝謝......我在同一頁面有幾個彈出窗口，如果我想爲'popover4-html'指定'max-with：50％'，我該怎麼辦？我試圖編寫'＃popover4-html .popover {...}'（和'.popover＃popover4-html {...}'）而不是'.popover {...}'，它不起作用。 .. – SoftTimur

我知道了......需要圍繞「4'...... – SoftTimur

」包裝一個類「標記將始終加粗它內部的文本，因此我用標記替換了它。 **有沒有聽說過CSS？** – connexo

做一個酥料餅在一個表

回答

相關問題