I have the following script:
<table width="100%">
<tr>
<td style="width: 300px;background-color: red">
</td>
<td style="background-color: lime">
<div style="width: 50%;overflow: auto;">
<img src="very_big_image.jpg" />
</div>
</td>
<td style="width: 400px;background-color: orange">
</td>
</tr>
</table>
It sets the width of second td equal to the width of my img,(but logically the second td must have the width = '100% - 300px - 400px') so I have the scroll in my whole window.
How can I fix it?
Setting the overflow to scroll should acheive what you're looking for:
overflow:scroll;
Example: http://jsfiddle.net/WbAEq/
Setting the overflow to auto as you have will only show scroll bars when you're using clipping.
UPDATE:
In order to get the table to work with overflow content you need to set the table-layout property of the <table> to fixed
table{
table-layout:fixed;
}
You can see an example of this here: http://jsfiddle.net/WbAEq/2/
Related
I have table below
<table style="width: 540px " border="1">
<tr>
<td style="text-align: left">
<img id="img1" style="cursor: pointer;" src="../left.png" height="30" width="30" />
</td>
<td style="text-align: center;font-size: medium"><strong>CENTRE THIS </strong>
</td>
<td style="text-align: right"><strong>key </strong>
</td>
<td style="text-align: left">
<input type="text" id="searchbox" />
</td>
</tr>
</table>
Is it possible to align 2nd td with text "CENTRE THIS" in centre of table?
here is fiddle
Yes
You need to use td:nth-child(n) property and table-layout: fixed property
Check this http://jsfiddle.net/Pv3Zk/347/
If you have a fluid layout you can set the width with CSS to percentages like 33%, 33%, and 33%. If you have a fixed layout, you should use CSS to set the widths of each column to fixed widths.
Use CSS to specify width of your td elements (add classes to tell one cell from the other).
Then use table-layout: fixed; for table. This will allow td to have fixed, specified dimensions.
Check out this simple demo.
Try this :
<td align="center">...</td>
If you want the text of Center of the Table, you have to set fix TD width
Why does this table height not function?
<table border=1 bgcolor="green" width=80% height="30%">
<tr>
<td rowspan="2" >
This is 1st row 1st column
</td>
<td >
2
</td>
</tr>
</table>
http://jsfiddle.net/zQNS4/
just add the following to your css:
html, body{
height: 100%;
}
As other said, a table doesn't have a height-attriute, but most browsers intrepet that anyway. you can see the result on jsfiddle.
The reason you need to do this is that the parent element of anything that should have a height in % must have a height too (as Shadow Wizard said: "30% of what exactly?" - the parent has to have a height).
The table tag does not contain a height attribute. Try setting the height of the table using CSS styling.
table{
height: 30%;
}
<div style="height: 200px; overflow-y: scroll;">
<table border=1 bgcolor="green">
<tr>
<td rowspan="2" >
This is 1st row 1st column
</td>
<td>
2
</td>
</tr>
</table>
</div>
I just had the same issue.
I have table inside a container ( div config-table ), just setting height didn't work for me. I had to set overflow: auto ( for my case auto was needed ) and now work
.config-table {
height: 350px;
overflow: auto;
}
I'm having a bit of an issue getting some stylesheet behavior that I want. I'm not even sure if it's possible. Basically I'm attempting to place a table with a variable number of cells with static cell width in a DIV with overflow: auto, and my goal is that when the tables width extends past the width of the container DIV that it becomes scrollable.
This isn't the case. The cells get shrunk together. A very basic representation (with inline styles for ease on this; not actually in the application haha) of the code:
<div style="width: 1000px; overflow-x: auto;">
<table>
<tr>
<td style="width:400px;">
This
</td>
<td style="width:400px;">
Should
</td>
<td style="width:400px;">
Scroll!
</td>
</tr>
</table>
</div>
Is there anyway I can do this with CSS, or am I going to have to go back to setting the width inline on a second div containing the table through calculations?
Works if you set the width on the table itself.
<table style="width:1200px;">
The td will always shrink to the necessary size, they won't push the table wider in that situation.
using CSS can done like below but make sure you use id or class for applying css if you have more then one table or div.
<style>
div { width: 400px; overflow-x: auto; }
table { width:1200px; }
table td { width:400px; }
</style>
<div>
<table>
<tr>
<td>
This
</td>
<td>
Should
</td>
<td>
Scroll!
</td>
</tr>
</table>
</div>
This should help
<table style="width: max-content;">
How can I have a table have the size of its content even if the parent is smaller?
Have a look at this sample:
http://jsfiddle.net/GtVx8/3/
The first table is 150px wide while the second one is 200px. How can I make the first table be 200px with the following restrictions?
The enclosing div must be 150px wide.
The table should not set its own width.
Not sure i've understand the question but you can force the table width as
<table width="200">
EDIT: then wrap everything in a div container and give the table container an 100% width like
<div>
<div style="width:100%">
<table >
<tr style="display:block">
<td style="width:100px;background:red">hello</td>
<td style="width:100px;background:green">world</td>
</tr>
</table>
</div>
<div style="width:200px">
<table>
<tr>
<td style="width:100px; background:red">hello</td>
<td style="width:100px; background:green">world</td>
</tr>
</table>
</div>
</div>
I have code like this:
<table width="625px">
<tr style="background-color:#CCC; font-size:14px;">
<td style="padding:8px; color:#333"><center><?=stripslashes($arr['signature']);?> </center></td>
</tr>
If $arr['signature'] is a long string, like this gjuytfdcrtrfdscvythgfvtfdgtrfdvbgfvcfgbdc the width doesn't help and it goes very wide. How can I prevent that?
there are many ways, depends on what you wish to do.
If you apply overflow:hidden then the overflown text would be hidden. You can use overflow:scroll; inside a div like <td style="padding:8px; color:#333"><center><div style="overflow:scroll; width:625px;"><?=stripslashes($arr['signature']);?></div> </center></td>
This will create a scroll for the overflow text, only for this cell (there is need to give width for this method).
Here an example for the overflow:scroll;
Try:
<td style="width: 160px; max-width: 160px;">
or
<td style="width: 160px; overflow-x: hidden;">
or both together.
See
http://www.highdots.com/forums/html/limit-width-table-cell-271764.html
Use the overflow property:
<table width="625px" style="overfow: hidden;">
use the overflow style property on the "td" tag
<td style="overflow-x: hidden;">your text here</td>
See the section on table widths in the CSS2 spec: http://www.w3.org/TR/CSS2/tables.html#width-layout
Roughly, tables will choose the maximum of the specified width and the sum of the widths of their columns. You have to constrain the width of the column, perhaps by setting a width on the element (you'll want to choose your overflow style here as well).
Example:
<table width="625px">
<tr style="background-color:#CCC; font-size:14px;">
<td style="padding:8px; color:#333; width: 625px; overflow: hidden; text-align:center"><?=stripslashes($arr['signature']);?></td>
</tr>
</table>
(Also note that <center> has been long deprecated; please use the text-align CSS property.)
I remember spending hours on that. Use the table-layout:fixed style.
<table style="width:625px;table-layout:fixed;overflow:hidden">
Each column will take the size of its first cell.