Reputation: 70
In the photo below, there's a div, in which I have a table with some content in it, and as I re-scale the web browser's page, the table goes out of the div.
What I'd like to do is to make the table smaller when it's re-scaled and still show everything that's inside of it, without the use of a scrollbar or anything like that.
EDIT
#profileTable{
width:auto;
text-align:left;
color:#000080;
padding:30px 60px;
border:1px solid #ccc;
border-radius:4px;
background-color:white;
margin: 0 50px 50px;
}
#content{
margin: 0px 60px 0px;
background-color:#E9E9E9;
border:solid 1px grey;
flex: 1;
clear:both;
position:relative;
}
<html>
<head>
</head>
<body>
<div id="content" >
<h2><center>Your profile</center></h2>
<table id="profileTable">
<tr>
<th>Username:</th>
<td>CONTENT</td>
</tr>
<tr>
<th>First name:</th>
<td>CONTENT</td>
</tr>
</table>
</div>
</body>
</html>
Upvotes: 1
Views: 51
Reputation: 106078
if you used flex
, you might use it too for tr
to allow wrapping without mediaqueries (note this table
could also be a list ul
or dl
)
horizontal margins can be turned to width with calc() and min-width, so they can visually collapse
example
#profileTable {
text-align: left;
color: #000080;
padding: 30px 60px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
width: calc(100% - 100px);
min-width: 270px;/* remove or tune this to your needs */
margin: 0 auto 2em;
/* word-break:break-all; not really a good idea */
}
#content {
width: calc(100% - 120px);
min-width: 360px;/* remove or tune this to your needs */
margin: auto;
background-color: #E9E9E9;
border: solid 1px grey;
flex: 1;
clear: both;
position: relative;
}
/* are you already using flex ? */
tr {
display: flex;
flex-wrap: wrap;
}
th {
white-space: nowrap;
min-width: 5em;/* remove or tune this to your needs */
}
td {
flex: 1;
}
h2 {
text-align: center;
}
<div id="content">
<h2>Your profile</h2>
<table id="profileTable">
<tr>
<th>Username:</th>
<td>CONTENT</td>
</tr>
<tr>
<th>First name:</th>
<td>CONTENT</td>
</tr>
</table>
</div>
Upvotes: 1
Reputation: 2815
Look at table-responsive
feature in Bootstrap.
https://www.w3schools.com/bootstrap/bootstrap_tables.asp
add
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-responsive">
And then
Upvotes: 0