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;
Related
I have a component that is made of some divs with a text inside. It's using overflow-wrap: break-word property for the text to fit:
This is how it looks like on PC screens
But as soon as i shrink screen width, words break and only some of the divs changes its height: This is how it looks like on small screens
HTML markup is here
The question is how do i make all the divs to change size in this case?
Hi i suggest to use a table for that
<table style="width:100%">
<tr>
<td>
{firstname} {lastname}
</td>
<td>
{card}
</td>
<td>
{payed}
</td>
<td>
PDF
</td>
</tr>
</table>
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/
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 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 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