I'm currently using the dataTable library with external plugins, and I want the wrapper width to adjust automatically.
Even if the width of th elements exceeds the viewport width, I don't want the div width to exceed 100%.
How can I make the div wrapper expand to fit the table width?
Below is an example that demonstrates my issue:
<html>
<head>
<title>test</title>
<style>
.wrapper {
background-color: red;
/* width: 8000px; -> don't look for this kind of solution */
width: auto;
display: table;
}
.table {
display: table-cell;
}
.table th {
background-color: yellow;
border: 1px solid blue;
width: 4000px; /* -> note that I can't use the min-width trick because this property is set by an external jQuery plugin */
}
</style>
</head>
<body>
<div class="wrapper">
<table class="table">
<thead>
<tr>
<th>Hello</th>
<th>World</th>
</tr>
</thead>
</table>
</div>
</body>
</html>