CODEWITHSUNDEEP
htmlcss
Marco P
Marco P

Reputation: 123

HTML adjust table's height

In my HTML page I have two tables on the sides, and in the center I have a div containing many elements (text, images, lists, ecc).

I want to adjust the two tables height in relation of the height of the central part of my page (the div).

Could you help me please?

This is a sample of code

<!DOCTYPE HTML>
<HTML>
<HEAD>
<STYLE>
.tablaterale {
font-size: 50%;
font-family: Bahnschrift;
color: white;
vertical-align: text-top;
height: inheritated;
} 

.div {
position: relative;
margin-left: 11.4%;
margin-right: 11.4%;
margin-top: 2.2%;
}

.titolo {
font-family: broadway;
font-weight: normal;
color:  yellow;
font-size: 428%;
margin-top: 0.7%;
margin-bottom: -3.2%;
}

</STYLE>
</HEAD>
<BODY bgcolor="blue">

<CENTER>
<H1 class="titolo">
- MY SUPER TITLE -
</H1>
</CENTER>
<TABLE width="10.75%"  border="2" class="tablaterale" align="left" 
bordercolor="yellow"><TR>

</TR><TABLE>
<TABLE width="10.75%"  border="2" class="tablaterale" align="right" 
bordercolor="yellow"><TR>

</TR><TABLE>

<div class="div">
Insert a long text
</div>

</BODY>
</HTML>

Upvotes: 2

Views: 200

Answers (1)

aviya.developer
aviya.developer

Reputation: 3603

You can wrap both tables in a container and set the container display to flex.

Here's and a working example i drafted on jsfiddle: https://jsfiddle.net/sb6e7gdh/5/

open it and play around with it to try out the possible configurations. Generally, you are expected to produce something of this sort when asking a question here so people could help you out better.

Here's some documentation on flex:

  1. https://www.w3schools.com/css/css3_flexbox.asp
  2. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Edited Addition:

Now you have updated your answer with some code i see that you use very specific settings to position and size your elements. Yes they are % units which are more adaptable then absolute px but this is a not a good way to go about it.

I highly suggest pausing on the project and getting familiar with either flex or grid positioning methods for CSS. It will allow you to produce a much more responsive and screen-versatile web page and will improve your CSS skills quite a bit. It is well worth the effort. You would be able to resume work on your project in a day or two with much more competency and ability. I know so, since I also used to work similarly when I began with CSS and have learned with more projects.

And here's the full code just in case you need it (it's the same on jsfiddle):

div#main {
  background-color: pink;
  display: flex;
}

table {
  display: inline-block;
  background-color: aqua;
  border: 1px solid black;
  margin-left: 5px;
  margin-right: 5px;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  height: 100%;
}
div#content {
  display: inline-block;
  background-color: beige;
  padding: 0 10px;
}

h1 {
  margin: 0;
}
<div id='main'>
  <table id='table1'>
    <thead>
      <tr>
        <th>Brand</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>BMW</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Audi</td>
        <td>Italy</td>
      </tr>
    </tbody>
  </table>
  <div id='content'>
     <h1> This website is awesome!</h1>
     <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit delectus quisquam libero ex sint repellendus officiis quasi nostrum perferendis, iste corrupti quod totam numquam recusandae amet, vel ab reiciendis dolorem!
     </p>
     <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde consectetur fugit eum totam, corrupti amet minima placeat aliquid. Culpa dolore ut aliquam sed eveniet id corporis fuga molestias perspiciatis repellat.
     </p>
  </div>
  <table id='table2'>
  <thead>
      <tr>
        <th>Brand</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dodge</td>
        <td>USA</td>
      </tr>
      <tr>
        <td>Kia</td>
        <td>S. Korea</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 2

Related Questions