I have a large table which I would like to apply a max-height to, however I am having difficulty doing this since the leftmost column is set to be fixed in place (using absolute positioning).
When I give a max height to its container div, the absolutely positioned div spills over and looks terrible. HTML looks roughly like this
<div style="max-height: 100px">
<table>
<tr>
<td class="fixed">blah</td>
<td class="not_fixed">blah!</td>
</tr>
</table>
</div>
This is an example which demonstrates my issue much more clearly:
https://jsfiddle.net/YMvk9/6468/
Related
I need to display a table like this, but have the rows all be the same height even though the images in the table have varying sizes. The table needs to be responsive, so that everything resizes as the window size is changed.
The current code for each row is this:
<tr width="100%" height="10%" style="background-color:rgba(158,158,158,1); color: #FFFFFF">
<td width="25%" style="margin:0; padding:4" align="left">Wed <b>Sep 29</b></td>
<td width="100%" style="padding:4;display:flex; align-items:center; justify-content: center;" align="center"># <img src="https://upload.wikimedia.org/wikipedia/commons/8/81/Pittsburgh_Pirates_logo_2014.svg" width="15%" style="padding:4"> Pirates</td>
<td width="25%" style="padding:4;margin:0" align="right">6:35 PM</td>
</tr>
And the full code is here.
The problem with this is that the row sizes vary depending on the size of the logo. You can see that the logo for the Pirates is larger than the logo for the Cardinals, so the row height is taller for the Pirates.
I have succeeded in resizing the logo to be the same height as the row, based on this answer. This involved positioning the logo absolutely, though. The code for this is here (see the 7th row where I made the change). The problem with this approach is then that I can't figure out how to display the text (the # symbol and the team name) together inline with the team logo. Obviously I can't use display inline block because I've positioned the logo absolutely. So, my question is: how can I resize the team logo to be the height of the row while also displaying the logo inline with the text (centered)?
Scrap the abspos approach.
For the all the img logos, remove width='15%' attribute.
Add a vh height property that changes with the height of the window, e.g.
<tr>
...
<img src="pirates.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>
<tr>
...
<img src="reds.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>
I currently have:
<div class="generic-block-70">
<div class="generic-content-70">
<table id="voteBlock">
// stuff
</table>
</div>
</div>
However, seeing as the generic-block-70 and generic-content-70 do not have a set height and they expand vertically as text is added, I can't simply set my table's style to height: 100%;.
Is there a way around this?
JSFiddle: http://jsfiddle.net/2vLEL/
Set overflow: auto; on your parent div.
http://jsfiddle.net/2vLEL/2/
.generic-content-70 {
overflow: auto;
}
I think I probably had a similar problem. This is how I solved it.
I have nested tables within tables.
Users clicked a button and Javascript created new table rows and cells and filled the cell with data from a form. In order to force the cell to wrap the text and not expand horizontally, I had to use a <div></div> tag inside the cell.
In order to force the "table" to NOT expand vertically as new table rows were added, I had to place <div></div> tags below the <td> containing the .
So, the html created from my javascript might look like this.
<table id="root">
<tr id="A">
<td id="1" style="width:200px">Content</td>
<td id="2" style="width:530px">
<div height="correct_height" overflowY="auto">
<table id="comments_table" style="width:510px table-layout:fixed">
<tr>
<td style="word-wrap:break-word">
<div style="width:480px;white-space:nowrap">Comments</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
.
.
.
</table>
The first <td id="1"> is created by a function that runs first.
The second <td id="2"> is created by a function that runs after and it grabs the height of the <td id="1"> so that the height of the 2nd cell in the row is dependent on the height of the 1st cell in the row.
The widths are arranged as such to allow space for the vertical scroll bar to appear.
You have to subtract any padding that you use. For example if two of the elements have style="padding:5px" then that means 5top 5bottom x 2 elements. So:
var correct_height = A.offsetHeight - 20;
The code depends on the intention:
If you want to lock the table to a height, give it a height: NNpx;
If you want to lock the div to a height, give IT a height: NNpx; and an overflow: MM; depending on your needs
<div style="width:500px;">
<p>To create not a block, but an inline code span,use backticks:Press the `<Tab>` key, then type a `$`.If you want to have a preformatted block within a list, indent by eight spaces: </p>
<table>
<thead>
<tr><th>Action</th>
<th>abc</th>
<th>xyz</th>
</tr>
</thead>
<tbody>
<tr><td>hihi</td>
<td>hihi</td>
</tr>
</tbody>
</table>
I set the div of width 500px, and under it I have p and table elemetns. The p element adjust to the width of the div, while the table has its own width, which doesnt necessarily adjust to fit into 500px. I don't know how this works, can anyone explain it to me? Thanks
By default, <table> elements adjust to auto fit their contents. If the contents don't need the full container, the space isnt taken. You can change this behavior by styling the table with:
<table style="width: 100%;">
In which case it will take all available width if possible.
I have a <table> inside a <div> tag, which doesn't want to span as long as it needs to be. I need to specify a width in px for the <table> to span and thus cause the <div> container it is inside to scroll. Otherwise, the <table> just spans to a width of 100%, i.e. the width of the <div>.
My example is as follows:
<div style="width:880px; overflow:scroll;">
<table> // I need to explicitly specify a width for it, otherwise it just span 100% which is incorrect
<tr><td></td><td></td><td></td></tr>
</table>
</div>
I have specified for all the <td> tags a width inside my CSS.
I don't understand why the <table> can't determine it's own width or just respect the widths of all the <td> tags.
Try setting white-space: nowrap; on the td in your table and dump a lot of text inside each td you will start seeing a scroll bar on your div.
Are you sure there isn't any unintended CSS being applied to the table? By default the table only expands to accommodate its columns.
<div style="width:880px; overflow:scroll; background-color: green;">
<table style="background-color: red;">
<tr>
<td>one</td>
<td>two</td>
</tr>
</table>
</div>
Using this code, you can see the red table is only as big as its columns in relation to the green div as long as no other CSS is involved.
Use a tool like Firebug or IE's Developer Tools (F12) to see which styles are actually being applied to the table element.
See the example here.
I'm trying to do the following: http://www.pastebin.org/113337
I'm wondering why the scrolling won't take place? It just stretches the table. Try running the code with and without white-space: nowrap and see how it differs. Whenever I apply nowrap my table gets stretched. How do I avoid this?
I'm pretty sure that's just how tables work; they stretch when there's too much content in one of their cells.
Try putting a <div> inside your <td> and apply the width and overflow properties to that instead.
Addendum:
Your table has a CSS width property of 150px while the div has a percentage, %100. Try giving the <div> a non-percentage width...
<table>
<tr>
<td>
<div style="150px;">
<!-- wtv -->
</div>
</td>
</tr>
</table>
Or try putting the whole <table> in a <div> with a fixed width...
<div style="width:150px">
<table>
<!-- wtv -->
</table>
</div>
... lastly, I'd advise that you put your CSS in an external .css file ;)