Jump to content

augment table at the bottom automatically

Recommended Posts

I'm having a thing I cant figure out in CSS


I defined a class to make a table. The idea is that the table will be filled with text and its added frequently. The bottom border of the table should add a new line and augment.


I tried several things, I also tried overflow-x auto, but I dont want a scrollbar. Is there a way to get rid of that scrollbar.


Im using CSS3 It would be great if someone has a solution.

Link to post
Share on other sites

Ok I give an example from w3schools.com




none of the overflow tag properties is giving the option tht I mean and that is that the text automatically adjusts the size of the cell.


By default it does.


But obviously it only works under specific circumstances because I cant change the bottom of the cell.


this is the class I wrote for a column

.kolom6 {border: 5px solid yellow;table-layout: auto;background-color: #ffcc33;font-size: 0.9em;width: 20%;font-family: Arial;margin-left: 52%;margin-top: 1%;height: 40%;display: table-column;position: absolute;color: black;line-height: 1em;border-radius: 15px 15px 15px 15px;}

This is put in another table-row, above this row a header-row and a footer-row.


I have now set most values of the rows to % so they can be recalculated, when text is added to the column.

Edited by davej
Link to post
Share on other sites

Ok this is the script I wrote.


If you add some lines to the column it will enlarge automatically.


But if the column gets so big and approaches the footer then it overlays the footer instead of pushing it down.


(in an alternative script I had the column enclosed into the div of the column, but then the left-margin is determined related to the columnn. with negative -px settings I had a bad result, so my question is if any of you knows another solution?



<html><head><meta content="text/html; charset=ISO-8859-1"http-equiv="content-type"><title>footer-down</title><style type="text/css">html, body {margin: 0;padding: 0;height: 100%;}.container {min-height: 100%;position: relative;}.header {padding: 10px;background: none repeat scroll 0% 50%;background: green;}.content {padding: 10px 10px 80px;}.footer {bottom: 0;height: 60px;position: absolute;width: 100%;}.column1a {border: 2px solid #ff6600;height: 100px;margin-left: 600px;min-width: 200px;background-color: #ffcc99;float: right;max-height: 100px;max-width: 200px;font-family: Arial;width: 200px;display: table;position: absolute;min-height: 100px;margin-top: 70px;visibility: visible;font-size: 0.9em;padding-bottom: 10px;}</style></head><body><div class="container"><div class="header="> This is the header</div><div class="content"> Here you can write content<br>Line: abcdefghijklmnop<br><div class="column1a">Column <br>Here some text<br><br><br><br></div></div><div class="footer">Place the footer here<br><br></div></div><br><br></body></html>
Link to post
Share on other sites

Ok, I see a page with an orange block in the approximate center. Now how is this different from what you want? Have you perhaps created a diagram showing what you want? I'm not a css expert but perhaps this is closer to what you want?

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>html, body {margin: 0;padding: 0;height: 100%;}.container {min-height: 100%;margin-bottom:-60px;/* same as height of footer */}.container:after{content:"";display:block;height:60px;/* same as height of footer */}.header {padding: 10px;background-color: green;}.content {overflow:auto;border: 1px solid blue;padding:0 10px;}.column1a {overflow:auto;border: 2px solid #ff6600;background-color: #ffcc99;float: right;font-family: Arial;width: 200px;min-height: 100px;margin: 10px 60px 10px 5px;font-size: 0.9em;padding-bottom: 10px;}.footer {clear:both;height: 60px; /* height of footer */border: 1px solid red;text-align:center;}</style></head><body><div class="container"> <div class="header"> This is the header</div> <div class="content">   Here you can write content<br>  [Line1]: abcdefghijklmnop abcdefgh ijklmnop abcdefgh ijklmnop abcdefgh   ijklmnop abcdefg hijklmnop abcdefg hijklmnop abcdef ghijk lmnop abcdefg  ijklmnop abcdefg hijklmnop abcdefg hijklmnop abcdef ghijk lmnop abcdefg     <div class="column1a">   Column a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a    a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a   a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a      <br>   Here some text  </div>  [Line2]: abcdef ghijk lmnop abcdefg hijklmnop abcdefghi jklmnop  abcdefg hijklmnop abcdefg hijklmnop abcdef ghijk lmnop abcdefg   abcdefg hijklmnop abcdefg hijklmnop abcdef ghijk lmnop abcdefg   abcdefg hijklmnop abcdefg hijklmnop abcdef ghijk lmnop abcdefg  </div></div><div class="footer">  ©2015 Place the footer here</div></body>    </html>
Link to post
Share on other sites

I cant get it working. Basically when I add text (for instance in a div) to the script its the same effect, the text outside the column moves the footer down, but I want the resizing of the column to move the footer. Finally where wont be any text outside the column, only more columns, say three or more.

Link to post
Share on other sites

I give an example of how it works. It is with embedded CSS and I want a separated CSS script. I made this with KOMPOZER.

<html><head><meta content="text/html; charset=ISO-8859-1"http-equiv="content-type"><title>footcol1</title></head><body><table style="text-align: left; width: 1841px; height: 760px;"id="mainrow" border="0" cellpadding="80" cellspacing="2"><tbody><tr><td style="vertical-align: top; height: 117px;">Header<br></td></tr><tr><td style="vertical-align: top; height: 542px;"><table style="text-align: left; width: 288px; height: 368px;"border="0" cellpadding="2" cellspacing="10"><tbody><tr><td style="vertical-align: top;"><br><br>place text here in column<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></td></tr></tbody></table><br></td></tr><tr><td style="vertical-align: top; height: 91px;">footer<br></td></tr></tbody></table><br><br></body></html>

If you load it in the browser you'll see the footer go down, when adding more text solely in the column.


I'm looking for a way to have this in an external style sheet.


Is there a converter from embedded html to external CSS? But more preferably (to understand and learn CSS better) I would like to know how to do it myself with CSS, so as done in the above script.

Link to post
Share on other sites

OK, I have absolutely no idea what you are trying to accomplish. It is rarely if ever necessary to place a table inside a table. For css the best approach is to keep it in the head until you have a lot of it.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...