I have a Table that contain a tr in this tr there is several td i need to have overflow-x scroll but it isn't working.
<tr id="TR_TESTS_BY_CAT" width="100%" height="480px" style="display: none; overflow-x:scroll">
<td height="530px" valign="top" id="TD_TESTS1" style="width: 25%">
<div id="divTests1" style="height: 530px; width: 100%; vertical-align: top;">
</div>
</td>
<td>.....</td>
.....
but it isn't working
overflow is not applicable to <TR>s by definition. TR (display:table-row) is not a block element - does not establish box (remember col/rowspans in cells).
Only block-alike elements (display:block | inline-block | list-item) have concept of overflow as they have box were to scroll.
You can give your td specific sizes: width:200px; this will set the size and the div should also get a width equal or lower, so the there wont be a horizontal scroll.
This is a work around obviously. if you want to get the best solution you can switch to using <div> instead of tables and and avoiding inline css. You can only imagine how much more you can do with css styling.
Related
I have a table and the overflow: hidden property doesn't work, why is that?
<table width="100%" style="table-layout:fixed">
<tr height="200">
<td width="100%" height="200" valign="middle" style="text-align: center; overflow: hidden;">
<img src="http://salesdey.com/product_images/eb235de7eee13a0aa61dae2cc9de1f7e.gif" width="100" />
</td>
</tr>
</table>
According to w3schools :
The overflow property only works for block elements with a specified height.
Since <div> is a block element you can try to use that in your <td> cell and then apply the property on it.
Also, as commented by #Roberrt this is already answered here in detail.
Why does overflow:hidden not work in a <td>?
Because the contents of a cell never overflow the cell in the Y direction. The cell height will always grow vertically to contain its contents. So there's nothing for the overflow property to do.
overflow:hidden not work on table-cell, if you can change the html, you should use a div instead of table.
But if you can do it... Then you should add display:inline-block to the td.
I'm populating a large amount of text within td. I am trying to wrap the text with td if the text content takes up enough space, but the text keeps breaking out of the table.
td.noBorder {
border: none;
}
.alignTable {
border-collapse: collapse;
background: #f4f4f4;
padding-left: 10px;
text-align: center;
font: normal 13px Calibri;
color: #5a5a5a;
}
table tr td {
height: 30px;
border: solid 1px #cbd0d2;
}
<div style="margin:0 auto;">
<div style="width:730px; margin:0 auto;">
<h1 style="height:20px;font:normal 18px Calibri;color:#010101;font-weight:600;border-collapse: collapse; margin-left:20px"> Related Links </h1>
<div style="width:730px; margin:0 auto;">
<h2 style="padding-left:23px;"> Header </h2>
<table border="1" width="100%" cellpadding="0" cellspacing="0" class="alignTable" >
<tr>
<td class="noBorder" style="text-align: left;padding-left: 23px;"><!-- #06999c -->
<img src="images/arrow.png" width="5" height="10" alt="" /> <a style="padding-left: 8px;" href="{$hyperlink}" target="_blank"> LARGE TEXT </a></td>
<td class="noBorder"/>
<td class="noBorder"/>
</tr>
</table>
</xsl:for-each>
</div>
</div>
</div>
Solution 1: Make It Scrollable
You can make the td automatically scrollable if the content exceeds its regular size by setting its overflow property to auto. If you expect that the td will usually overflow its boundaries, you could also pass overflow: scroll so that it always renders with a scrollbar. Check out the MDN article if you decide to go that route.
Solution 2: Flexbox
Within the td, you could add a div and give it display: flex. Doing this would allow you to apply styles solely to that div without breaking outside of the table. This goes against the cascading principle of CSS, but should be a convenient workaround if that's all you need.
If you're unfamiliar with flexbox styles, Chris Coyier does a good job of explaining them. Flexbox is supported by nearly all modern browsers, and can be coaxed to work with IE9 and 10 if you apply vendor prefixes.
Suggestion: Refactor Your Markup
Just so you're aware, using a table-based layout is no longer a recommended way to structure most websites. If it's at all possible to refactor this into div's, doing so will keep your stylesheets organized and manageable.
You have several possibilities, one to add vertical scroll if text exceeds the margin, one to adjust the font size to fit the text inside, you should see what fits best in your page. If you create a snippet here I can help you more precise!
I've searched and searched and tried different techniques with nothing that works.
I have 3 columns, and in the left and right columns I have an image that needs to be vertically aligned to the center as well as horizontally to the center. However, my middle content div stretches down a bit. So I would like my 2 columns to match the height. These 3 columns are wrapped in another div.
Any ideas?
in your case it's better to use table instead of div because any change in some cell inside certain row will effect the other cells.. try this code it may do the job
<div style="border:1px black solid; width:850px; margin:auto">
<table style="border:1px red solid; width:100%; height:500px; text-align:center" cellspacing="0">
<tr>
<td style="border:1px lime solid">1</td>
<td style="border:1px lime solid">2</td>
<td style="border:1px lime solid">3</td>
</tr>
</table>
</div>
I'm not sure wat you mean by "100% of the height", that shouldn't matter, but I would just play around with the css "margin" attribute, and assign percentages (not pixels) to it based on the parent size. It may not be what you're looking for, but it's saved my butt on sites before, and it's probably the easiest way.
Add this to your css:
margin: auto;
padding: auto
I can't get over what appears to be a simple CSS formatting problem in Chrome: I want to put a table towards the right, and a label and some buttons toward the left, inside the same paragraph. This works easy enough in other browsers (Firefox, IE7 & 8), but in Chrome the table stretches over the entire page, under the label.
HTML:
<div class="formrow">
<label> </label>
<div style="display: inline; width: 208px; ">
<table id="tbl_Index" class="grid" style="display: inline; width: 208px; table-layout: fixed;">
<thead>
<tr class="">
<th style="width: 50px;"></th>
<th style="width: 150px;" class=""></th>
</tr>
</thead>
<tbody>
<tr id="1" class="">
<td style="width: 50px;"></td>
<td style="width: 150px;"></td>
</tr>
<!-- etc... -->
</tbody>
</table>
</div>
</div>
Thing is, I've tried just about any trick I found to get the table limited at 200px:
I tried assigning table-layout: fixed, which, in conjunction with width, should have limited my table to 208px;
I tried wrapping the table in a div and setting the div inline, to limit the table this way
I tried styling the grid with display: inline; and then setting max-width: 208px; (you might know that max-width only applies to inline or block, and table is neither of those.)
What's really annoying for me is that if I go in the console and try to get width for the table, it does tell me 208; but when I look in the compiled properties for the table, it displays 0px;
Add to the table's style: float:right; and you want to use inline-block and not inline this should do the trick
You can try to use this css above:
div.formrow { clear:left; }
div.formrow label { float:left; }
div.formrow tabel { width:208px; border-collapse:collapse; display:inline-block; }
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.