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>
Related
I'm trying to do something that should be fairly simple. I have a column of text in a table that has values from 1 to 18. I want the cell that has the text to align center. However, sometimes, the same cell needs to display an asterisk (*). When the asterisk is displayed, it should be aligned left in the same cell, while keeping the numbers themselves perfectly aligned.
I can't quite get it to align the right way
<table border=1>
<tr>
<td style="text-align:center" width=50>
<div>
<div style="float:left;">*</div>
<div>14</div>
</div>
</td>
</tr>
<tr>
<td align=center>
<div></div>
<div>16</div>
</td>
</tr>
</table>
Just give position: absolute to the div with asterisk, and your numbers will be always centered properly:
<table border=1>
<tr>
<td style="text-align:center" width=50>
<div>
<div style="position: absolute;">*</div>
<div>14</div>
</div>
</td>
</tr>
<tr>
<td align=center>
<div></div>
<div>16</div>
</td>
</tr>
</table>
In this case position: absolute tells: "Don't consider absolutely positioned div's dimensions". If you will inspect the div with number, you will see, that it takes the full width and height of parent element, like the div with asterisk is not in DOM.
May be my explanation is a little poor and not 100% correctly, but it should give you the basic understanding. For more info look through "position: absolute" area in this site or somewhere else: https://www.w3schools.com/css/css_positioning.asp
When I put a table within a fixed-width container and the sum of the widths of the columns exceeds the container width, as a general rule, I observe the table won't overflow the container, but the columns will be rendered narrower than their styled width.
But I also observed some cases where the table indeed does overflow. One case that especially puzzles me is shown here (or in this Fiddle):
<div style="width:750px;border:1px solid black">
<table>
<tr>
<td>
<table>
<tr>
<td colspan="2">
<input style="width: 210px;">
</td>
</tr>
<tr>
<td style="width: 200px"></td>
<td><input style="width: 200px;"></td>
</tr>
</table>
</td>
<td>
<input style="width:400px">
</td>
</tr>
</table>
</div>
In Chrome (40.0), the column widths are preserved and the table overflows. In IE and FF, the table fits the container and the columns are shortened.
Is there a general rule for "squeezing" tables into containers? Is Chrome is buggy? Or is such convoluted table design hoplessly beyond specification?
You can set those width of the input to max-width:100% and width:100%
take a look at this https://jsfiddle.net/ky2okqy5/6/
UPDATED https://jsfiddle.net/ky2okqy5/7/
I have the following example
<table align="right" border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<div style="width: 100%; background-color: red">
test
</div>
If the code is run, the div will enter the floated table. The table will need to be floated so this can't change. Is there a way to stop the other content entering the floated element?
One solution is to give the table an explicit background color.
<table style="background:white; float:right" ...
See new JSFiddle.
The other answers all change other properties such as the relative widths or positions of the div and the table.
Try not to use depreciated HTML tags like align and border. Cellpadding and cellspacing can also be achieved with styles but I'll leave that as an exercise :) This will make the div take up as much space as is needed. If you know the size of the parent div which the table and this div are contained in, just set the width of the table and div to a fixed value.
<table style="float:right; border: 1px solid black;" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<div style="float:left; background-color: red">
test
</div>
http://jsfiddle.net/Shnjt/
use this
<div style="90%; margin-left:auto; margin-right:auto;">
<table style="float:right;width:45%">
</table>
<div style="width:45%;background-color: red; float:left;">
test
</div>
</div>
If you want div and table to be floated you need to set width for both and css: float: left to the div and float: right to the table.
Otherwise you can try removing width:100% from your div and adding display: inline-block.
There is a css property that controls whether an element respect the previous floating element.
Here is the documentation: http://www.w3.org/wiki/CSS/Properties/clear
I do not know what you want to get, but that might help.
# Mr.Lister....
<div style="width: 100%; background-color: red;float:left;">
test
</div>
Float:left; will be helpful to your code.
Good Luck!
I have a table element contained in a div and the table is set a width of 100%.
The div element is reduced in width whenever the browser width reduces.
In Chrome, Safari, Firefox and IE7 when the div get resized, the table also is resized.
But in IE8, though, the table remains without being resized and overflows the container div
Following is the structure I am dealing with
<div style="width:500px">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td valign="top">
<div>My table column contents</div>
</td>
<td valign="top">
<div>My table second column contents</div>
</td>
</tr>
</tbody>
</table>
</div>
You have the table wrapped in a div with a defined width. Just define the width of the table too.
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/