Last post Sep 27, 2013 07:43 AM by roywax
Sep 20, 2013 06:35 PM|roywax|LINK
I have a table with 4 columns taking 25% of the total table width. Inside each td there is a div. This div is 100% of the td width It has a style overflow: hidden in order to make that its content do not change the width of the parent td / div
When using only % it doesn't work. if i set the div to a 'width: px' value it works. How can i use % for widths (my site is dynamic) and still make overflow: hidden work?
Sep 20, 2013 06:48 PM|A2H|LINK
If you are trying to hide absolute positioned elements make sure the container of those absolute positioned elements is relatively positioned.
Sep 20, 2013 07:11 PM|roywax|LINK
Please see my link test.html.
The elements are not absolute positioning.
Just simple span inside a simple div.
When the div has width with '%' the overflow: hidden does not work.
In my example i have both in the 3 example tables
Sep 26, 2013 06:59 AM|Fuxiang Zhang - MSFT|LINK
I’m glad to you post the issue to asp.net forum.
According to your description, you want a table contains four tds which have same width.
And you want to use the percent to control the width of td. In each td there is a div which has a 100% width relative to parent element td.
If so, the overflow:hidden of div will no effective.
For this issue, I suggest you set the layout of table as “fixed”.
<table style=" width:400px; table-layout:fixed " >
<div style="width:100%; overflow:hidden">dddddddddddddddddddddddddddddddddddddd</div>
It works fine in my workaround, please try it. Thanks.
Sep 27, 2013 07:43 AM|roywax|LINK
Worked perfectly, i also added white-space:nowrap to make sure each element was 1 line only.