У меня проблема с button внутри div, которая влияет на div. Вот основные черты c:
<div>
<div>
<div>
<div>
<button>THIS BUTTON</button>
<div></div>
</div>
</div>
</div>
<div>
<table>THIS TABLE</table>
</div>
</div>
Интуитивно я бы сказал, что добавление или удаление этого button не должно влиять на table и div, содержащие table.
Я хочу, чтобы table было как можно шире.
А без button это выглядит так:
Но затем я добавил JavaScript код, который экспортирует содержимое table в файл CSV.
Как только я добавил кнопку для выполнения этого действия, table становится уже:
Вот пример кода в виде отдельного HTML файла:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<style>
* {
color: #2b2b2b;
font-family: "Roboto Condensed";
}
button {
cursor: pointer;
margin-top: 0rem;
}
.container {
margin-left: 0px;
margin-right: 0px;
}
.table td, .table th {
padding: .25em;
}
.table {
width: 100%;
}
</style>
<script>
$(document).ready(function () {
alert('ok?');
if ($('table').length) {
$('#export_button').show();
}
});
</script>
</head>
<body>
<div class="container-fluid" style="max-width: 100%">
<div class="container" id="page_header">
<div class="float-right">
<div>
<button style="margin-top: 0px; display: none"
id="export_button" type="button" onclick="">
Export to CSV file
</button>
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail back-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Icon_Arrow_Left_256x256.png" alt="go back" id="back-button">
</div>
<img class="img-responsive img-fluid img-thumbnail" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/0/04/1328101942_Arrow-Up.png" alt="menu" id="show_menu">
<div class="d-inline">
<img class="img-responsive img-fluid img-thumbnail forward-link" style="max-width:2em; height:auto;"
src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Icon_Arrow_Right_256x256.png" alt="go forward" id="forward-button">
</div>
</div>
<div class="text-right login-logout" style="background:transparent; border:none; color:transparent;">
<a href="/login">Login</a>
</div>
</div>
<h1><div class="container">A very Informative Header</div></h1>
</div>
<div class="container-fluid">
<div class="row">
<table id="myTable" class="table table-striped table-responsive table-hover sortable">
<thead>
<tr><th>This is Column 1</th><th>This is Column 2</th><th>This is Column 3</th><th>This is Column 4</th><th>This is Column 5</th><th>This is Column 6</th><th>This is Column 7</th><th>This is Column 8</th><th>This is Column 9</th><th>This is Column 10</th><th>This is Column 11</th><th>This is Column 12</th><th>This is Column 13</th><th>This is Column 14</th></tr>
</thead>
<tbody>
<tr><td>45629</td><td>746582945 </td><td>8752</td><td>45234</td><td>342</td><td>658472</td><td>764932</td><td>48753 </td><td></td><td>Something very important</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>3.14159265357989</td><td>13</td><td>42</td><td>7abc</td><td></td><td>Here I have some pretty long text that is not important, but it's here anyway, just to make the table bigger</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>