如何为引导面板标题设置overflow-x

时间：2019-03-25 02:39:28

标签： javascript html css bootstrap-4

我有一个表，其中包含从div溢出的图像。我在CSS中使用overflow-x:auto克服了这个问题，但是我注意到引导面板标题未与overflow-x一起扩展。如何强制面板标题跟风？预先感谢。

enter image description here

HTML 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>FLASK Test</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='stylesheet.css') }} ">   
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 
  <script src="{{ url_for('static',filename='jscripts.js') }}"></script>
</head>
<body>
<div class='panel panel-default'>
    <div class="panel-heading">Outer panel heading</div>
        <div class="panel-body">
            ...
            Panel Content
        <div class="panel panel-default" id="containTable">
            <div class="panel-heading" id="panelHead"><h3 class="panel-title">Inner Panel title</h3></div>
        </div>
    </div>
</div>

</body>
</html>

JavaScript 

(function() {
        var image = "/static/images/image.jpg",     columns = 3, i,
        table = document.createElement('table'),
        tbody = table.appendChild(document.createElement('tbody')),
        tr, td, img, divpanelhead = document.getElementById('panelHead');
        for( i=0; i<9; i++) {
            if( i % columns == 0) tr = tbody.appendChild(document.createElement('tr'));
            tr.appendChild(document.createElement('td'))
              .appendChild(document.createElement('img'))
              .src = image;
        }
        divpanelhead.appendChild(table);
    })();

CSS 

#containTable{
    width:80%;
    display:block;
    overflow-x:auto;
}

#tablePanelHead {
    width:auto;
    overflow-x:auto;
}

0 个答案:

没有答案
相关问题
最新问题