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/
Related
I am new to CSS. When I run the following code in IE it lines up the spans as expected, fixing there widths to 100px and padding the sides with as much space as necessary depending on the window size.
<table ID="tblRecordCount" style="width:100%">
<tr>
<td />
<td style="width:100px">
<span ID="lbl1" runat="server">Records1</span>
</td>
<td style="width:100px">
<span ID="lbl2" runat="server">Records2</span>
</td>
<td style="width:100px">
<span ID="lbl3" runat="server">Records3</span>
</td>
<td />
</tr>
</table>
When you run it in Chrome the browser either sets the first td width to 0px and fills in the last one, or sets the first and last to 0 and stretches the middle ones to fill the space.
Any CSS tricks to tell Chrome to behave? You can see this behavior in jsFiddle.
Is there a way to give HTML table width and height in millimeters?
<table border="1">
<tr width="17mm">
<td>gukgu</td>
<td>gukgu</td>
</tr>
</table>
Is this works?
Yes, you can set widths in millimetres. However, setting a width on a <tr> element usually doesn't do anything. Instead, consider adding this style to the table: width:17mm; table-layout:fixed
You can using css, however it is only recommended for print. For display on screen, you use em, px or %.
<table border="1">
<tr>
<td style="width: 17mm;">gukgu</td>
<td style="width: 17mm;">gukgu</td>
</tr>
</table>
See the manual
See a demo
I have a table of width 100% (fit to screen ) with 3 <td> in that. In 2nd <td> I have some content like this addfdss212s1ssff54f5df4d54s54dsf64dsfsadjvmckjsadkjkdflsadfkksdalasdflsdfkasd6f465, this content does not contain any space. I have given 70% of width to the 2nd <td> but when the characters of content increases that 2nd <td> expand and layout get disturb. Is it possible to get increased character to next line in width of 70% with the help of CSS? (see below in the code).
<table width=”100%”>
<tr>
<td width=”10%”>Result1</td>
<td width=”70%”>addfdss212s1ssff54f5df4d54s54dsf64dsfsaDjvmckjs
adkjkdflsadfkksdalasdflsdfkasd6f465
</td>
<td width=”20%”>Comments</td>
</tr>
</table>
Try:
<table style="table-layout: fixed">
<tr><td style="word-wrap:break-word">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord</td></tr>
From: https://stackoverflow.com/a/1883702/585552
I think the rule you're probably looking for is:
word-wrap: break-word;
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 to dynamically create a table with a variable number of columns, determined at runtime.
Can somebody tell me if it's possible to have a html table with equal size columns that are fully stretched?
If you don't know how many columns you are going to have, the declaration
table-layout: fixed
along with not setting any column widths,
would imply that browsers divide the total width evenly - no matter what.
That can also be the problem with this approach, if you use this, you should also consider how overflow is to be handled.
<table width="400px">
<tr>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
</table>
For variable number of columns use %
<table width="100%">
<tr>
<td width="(100/x)%"></td>
</tr>
</table>
where 'x' is number of columns
ALL YOU HAVE TO DO:
HTML:
<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>
CSS:
#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/
if you have th you need to set it too like this:
#my-table th{width:2000px;}
Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.
table {
width: 100%;
th, td {
width: 1%;
}
}
SCSS syntax