Javascript 如何为引导面板标题设置overflow-x
我有一个表，其中包含从div溢出的图像。我在css中使用Javascript 如何为引导面板标题设置overflow-x,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我有一个表，其中包含从div溢出的图像。我在css中使用overflow-x:auto克服了这个问题，但是我注意到引导面板标题没有随着overflow-x扩展。如何强制面板标题跟随？提前谢谢 HTML <!DOCTYPE html> <html lang="en"> <head> <title>FLASK Test</title> <link rel="stylesheet" href="https://maxcdn.
overflow-x:autooverflow-x<!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>
(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);
})();
#containTable{
width:80%;
display:block;
overflow-x:auto;
}
#tablePanelHead {
width:auto;
overflow-x:auto;
}