У меня есть таблица, которая содержит изображения, которые выходят за пределы div. Я преодолел это с помощью overflow-x:auto в css, однако заметил, что заголовок панели начальной загрузки не распространяется на overflow-x. Как я могу заставить заголовок панели следовать его примеру? Заранее спасибо.
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;
}