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
Related
I have a panelGrid to show information. When I insert one button in the first row, the rest of the rows move down. If I insert the button the rest of the rows don't must be moved. What CSS properties I need use.
A picture of my panel:
Shadowed row is the first row. Next picture show the second row:
And I want to my panel look like this:
I have used position:absolute over the button but my page is responsive and when I resize the page, this property crash responsive design. So what properties I need to use for get my goal? I am using Primefaces.
Regards
You'll need a div wrapper for your button, and the button to be floated inside so the div does not take extra height.
<table>
<tr class="first-row">
<td>
<div class="button-wrapper">
<a class="some-button">+</a>
</div>
First row
</td>
</tr>
<tr class="second-row">
<td>
Second row
</td>
</tr>
</table>
And the CSS:
.button-wrapper {
float: right;
height: 1px; // Fool the row by thinking that this div doesn't have height
}
.some-button {
float: right;
}
This way, when the navigator renders the row, it thinks that the div child has only 1 px, so it does not expand vertically.
Look at this example: https://jsfiddle.net/z2L715ev/2/
So I have these tables that I'm trying to make for an email template, and these three columns which have a float property in order to stack them one bellow another when I resize the window.
The thing is that while it looks good at maximum size and minimum size (at maximum they are next to each other, at minimum they are one bellow another, as intended), in between the third column moves below the first while the second remains next to the first, and after further resizing the second column then changes it's position below the first column and the third column moves further away from the second one. What I wish to know is if there is a way to make them move in a certain order, like the first one to move below should be the second column, and only after that the third. Or even better would be if they moved all at once!
Also, I am very curious as to why are the texts moving upward inside the cells when I give them the float property, me preferring them to remain vertically aligned in the center, as they were before making them float.
Note: because this is intended for emails, I had to use all my css styling inline as the server I use does not recognize the style tag. Also the max width for the table is of 600px
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;margin-left: auto;margin-right: auto;">
<tbody>
<tr>
<td class="placeholder" style="width: 180px;float:left;">
Description:
</td>
<td class="links" style="width: 275px; float:left;">
very long link
</td>
<td class="buttons" style="width: 85px; float:left;">
button
</td>
</tr>
</tbody>
</table>
You need to enclose table cell item (placeholder, links and buttons) in a different Html.
See/try the following code:
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;margin-left: auto;margin-right: auto;">
<tbody>
<tr>
<td>
<div style="width:180px;display:inline-block" class="placeholder">Description:</div>
<div style="display:inline-block">
<div style="width:275px;display:inline-block" class="links">very long link</div>
<div style="width=85px;display:inline-block" class="buttons">button</div>
</div>
</td>
</tr>
</tbody>
</table>
Items are in one table cell, so the table has one column, with the same width.
The description item is enclosed in div with display:inline-block.
Both links and buttons are enclosed in another div with display:inline-block.
When You resize window the second div (that enclose links and buttons) wrap and take links and buttons togheter on the second row.
If the table has more columns you need to enclose all columns in that way.
I have a table that contains variable amounts of text in several columns with fixed widths. Some of the columns will allow the text inside of them to grow until it is all showing, but the others will be limited to that height, even if they have text that ends up hidden. Is there any way to do that without any JavaScript?
A couple notes:
I don't know what the text will be so I can't set a concrete height on the row itself.
Previously, I set the height of the text boxes that couldn't grow to be very small, then found them after the page loaded, set their row height to be a concrete number, and set their height to inherit. That was too slow, though, as I will have a lot of rows.
Here is the shell of a table that kind of shows what I'm going for. I need to know how to write out the classes.
<table>
<tr class="rowCanGrow">
<td class="canGrowTD" style="width:90px;">
<div class = "canGrow">Should see all of this text.</div>
</td>
<td class = "cantGrowTD" style="width:80px;">
<div class = "cantGrow">Should see all of this text.</div>
</td>
<td class="canGrowTD" style="width:100px;">
<div class = "canGrow">(Controller) Should see all of this text.Should see all of this text.</div>
</td>
<td class = "cantGrowTD" style="width:100px;">
<div class = "cantGrow">This one should get cut off mid sentence, and definitely shouldn't be allowed to grow as far down as it wants to grow.</div>
</td>
</tr>
</table>
Edit Added a space so that the words break correctly and the width's stay consistent, since it's unrelated to what I'm trying to solve.
Edit 2 Clearing up some things. The cells should all have fixed widths (added inline styling) and note that I won't be able to set a concrete height anywhere because I won't know what that is until the text has rendered and set it.
Edit 3 Here is the desired result:
You can set to you div height and width as 100%, with overflow: hidden; to hide scrollbar. Second, you should set the any height of your <td>. So, basically the div's height is that of the containing cell and the text cannot grow the div, keeping the cell/row the same height no matter what the window size is.
td.canGrowTD > div {
width: 100%; height: 100%; overflow:hidden;
}
td.canGrowTD {
height: 20px;
}
<table>
<tr class="rowCanGrow">
<td class="canGrowTD">
<div class = "canGrow">Should see all of this text.</div>
</td>
<td class = "canGrowTD">
<div class = "cantGrow">Should see all of this text.</div>
</td>
<td class="canGrowTD">
<div class = "canGrow">(Controller)Should see all of this text.Should see all of this text.</div>
</td>
<td class = "canGrowTD">
<div class = "cantGrow">This one should get cut off mid sentence, and definitely shouldn't be allowed to grow as far down as it wants to grow.</div>
</td>
</tr>
</table>
There is a way to do this as it turns out. Here is the solution:
td {
vertical-align:top;
}
.cantGrowTd {
height:100% !important;
position:relative;
overflow:hidden;
}
.cantGrowTd div.cantGrow {
position:absolute;
height:100% !important;
max-height: initial !important;
overflow: visible !important;
}
You can most likely ignore the "important" statements as they are not required unless your td elements and divs are setting their own properties that need to be overridden (as mine do in my actual application).
I have created a couple of tables. now i need both tables to be next to each other and not one table on top of each other. how can i position the second table next to the first one (to the right) but with sufficient space in between?
this is some code of my second table:
<table>
<h3>Personaldaten</h3>
<tr>
<td>Externe Referenz:</td>
<td colspan="2">
<input class="LargeText" type="text" style="width: 150%">
</td>
</tr>
<tr>
<td>Titel:</td>
<td colspan="2">
<input class="LargeText" type="text" style="width: 150%">
</td>
</tr>
above are 2 entities from the first table, how do i proceed like this?
Try to use a wrapper around the tables and use float:left;
//margin: top right bottom left
<div style="width:500px; margin: 30px 0px 0px 320px">
<table style="width:240px; float:left; margin-right:20px;">
</table>
<table style="width:240px; float:left;">
</table>
</div>
get rid of your absolute positioning if you don't really need it and use CSS like
table{
float:left;
margin:0px 5px;
}
You have two choices really.
If you're happy creating your layout with tables, then put both of your tables within another table. i.e.
<table>
<tr>
<td>
<table>{ table 1 stuff }</table>
</td>
<td>
<table>{table 2 stuff }</table>
</td>
</tr>
</table>
Or you can start looking into 'float'ing your elements.
You can create a new table with 1 row and 2 columns and place your first table inside the first column and your second table inside the second column.That way both tables can be displayed side by side
If it were me, I would surround your tables in a div layer, specifying the width and height of the div layer to force the tables next to each other.
For example:
<div id="tablecontainer">
<table id="lefttable"></table>
<table id="righttable"></table>
</div>
And in the CSS:
table
{
margin: 5px;
}
#lefttable
{
float: left;
}
Obviously, this code isn't going to be exactly what OP wants, but you get the idea.
Either use float: left or display: inline-block.
#1:
table {
margin: 10px;
float: left
}
#2:
table {
margin: 10px;
display: inline-block
}
See http://shaquin.tk/experiments/tables2.html and http://shaquin.tk/experiments/tables3.html.
First, fix the syntax and styling. A table element cannot have an h3 child. Either put the h3 inside a cell (which is inside a tr), or turn it to a caption. Don’t set a width of 150%, as this would make the a cell occupy 150% of the width of the available space. The width of an input field set is best set in characters, using the size attribute in HTML.
Then you can float the tables in CSS as suggested in other answers, or by using align=left in table tags. To create horizontal spacing between the tables, you can set e.g. margin-right on the first table.
Note that for usability and accessibility, forms should normally be presented so that there is one input item with its label on one line, so that filling out the form proceeds vertically in a simple manner. So you might be solving the wrong problem.
I have some text in table column which is greater than the column width I want. So text is overflowing from it. So I apply overflow:auto but in this case it is showing scroll on every page where data is less than the width of the column.
I don't want to show the scroll on that page where data is less than the width of column just want to show only where data is greater than its length.
Does any one have some suggestions?
<td style=" width:50%;overflow:auto;>
Try to wrap td content in div with fixed width and overflow: auto
For example:
<table>
<tr>
<td>some content</td>
<td> <!-- your fixed width column -->
<div style="width: 100px; overflow: scroll;">
Loremipsumdolorsitametconsectetuadipisicingelit
</div>
</td>
</tr>
</table>
use this <td style=" width:50%;overflow:scroll;">
This will insert horizontal and vertical scrollbars.
They will become active only if the content requires it.