CODEWITHSUNDEEP
htmlcsshtml-table
leveeee
leveeee

Reputation: 70

Rescaling table, based on webpage's size

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.

enter image description here

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

Answers (2)

G-Cyrillus
G-Cyrillus

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

Ali Rasheed
Ali Rasheed

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

Related Questions