CODEWITHSUNDEEP
htmlcssimage
user1547410
user1547410

Reputation: 893

Resize Table Proportionally to fit within div

My issue is simple and i suspect the answer is its not possible as i couldn't find any examples.

I have a table built with css and HTML. I would like to re-size it proportionally as if it was an image so it fits inside a DIV. I know you guys know what a table looks like but seems like i have to submit some code to submit this questions so i added it below

<table>
    <tr>
       <td></td>
    </tr>
</table>

Assuming that's not possible is it possible to convert a table into an image and then i can re-size the image?

Upvotes: 2

Views: 23874

Answers (2)

user8823283
user8823283

Reputation: 

.container {
  width: 100%;
  background-color: blue;
}

table {
  width: 80%;
  margin: 0 auto;
  background-color: red;
}

td {
  width: 50%;
  color: white;
  padding: 1rem;
  background-color: green;
}

th {
  color: black;
}
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 container">
  <table>
    <tr>
      <th>1st COLUMN</th>
        <th>2nd COLUMN</th>
    </tr>
    <tr>
      <td>Table Data1 Row1</td>
      <td>Table Data2 Row1</td>
    </tr>
    <tr>
      <td>Table Data1 Row2</td>
      <td>Table Data2 Row2</td>
    </tr>
  </table>
</div>

Upvotes: 0

LindleyW
LindleyW

Reputation: 79

You can set the width of the table to be 100% of the containing div, then set the <td>'s to be a percentage of the table.

An example would be something like this: http://jsfiddle.net/9VFQ5/

<div class="container">
  <table>
      <tr>
         <td>Test 1</td>
         <td>Test 2</td>
      </tr>
  </table>
</div>


.container {
  width: 25%;
  background-color: red;
}
table {
  width: 80%;
  margin: 0 auto;
  background-color: blue;
}
td {
  width: 50%;
  color: white;
}

Upvotes: 3

Related Questions