Large text going out of table in td's - html

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!

Related

Generic user based width

I just started learning HTML today and was wondering how to have generic width so it fits the screen perfectly across every screen resolution?
Here is my current code, I tried using percents but code no worky!
<!doctype html>
<html>
<head>
<title>Home</title>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="70%">
<a href="">
<img src="Resource/Header.png">
</a>
</td>
</tr>
</table>
</table>
</body>
</html>
If you want your table to span the full width of the screen you should define it like this:
<table align="center" cellspacing="0" cellpadding="0" style="width: 100%;">
...
In general don't use the width attribute but rather the style attribute
Also noted in the comments, it's better to use semantic markup and put your CSS in external files, but if your just starting out, it's probably a good way to get going.
Some other links you might find useful:
https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials
http://getbootstrap.com/ => Advanced CSS framework (I would advice you to learn the basics first)
It's unclear exactly what you're trying to do. One interpretation is that you're trying to have an image left-aligned inside a box which occupies 70% of the page's width (here showing Resource/Header.png to be 300 pixels wide):
In that case, you need to add two empty columns and fix the table's width to 100% of the page:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
It's also a possibility that you want the image to take the whole 100% of the cell—that is, 70% of the page. In that case, you need to fix the width of the image to 100%:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png" width="100%"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
…but tables are for tabular data, not for layout.
Fortunately, every result we've achieved up to now is trivial to achieve using CSS. We need a container and an image:
<header> <!-- header is a new tag in HTML 5; use something else if you want -->
<img src="Resources/Header.png">
</header>
Then, you need to style it up with some CSS:
header {
width: 70%;
margin: 0 auto;
}
Try it on JSFiddle.
I think the margin: 0 auto; line requires some explanation. We are using shorthand style, where we first provide the vertical margins and then the horizontal margins. It is equivalent to
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
We don't actually care about the margin-top and margin-bottom; what actually makes it do anything is the margin-left and margin-right. When one of the margins is auto, the browser will use that margin to fill up any extra space. When both are auto, it will evenly distribute the space between them, thus evenly padding out both sides and centering our element.
Now say we want the latter style we achieved with the table. Then we give the img all of the space within that element:
header > img {
width: 100%;
}
Try it on JSFiddle.
Note that we only needed to change the CSS, and none of the HTML needed to change. This is one advantage of using CSS over tables for layout—change the styles in one place, everything that uses those styles is updated. Also note that the code using CSS is shorter, although this isn't always the case.
…but we still aren't accessible.
If you have an image, always add an alt attribute. The alt attribute is supposed to be a replacement for the image if the user agent cannot display the image, or if the user is blind, etc. For your header, whatever text appears would be fine:
<img src="Resources/Header.png" alt="Frank's Flower Shop">
For purely decorative elements, alt="" should be used. (Yes, an empty alt is better than no alt—but only when it is purely decorative.) Refrain from describing what it is—instead, provide content that could adequately replace the image. (e.g., “screenshot” is bad; “the main window contains a toolbar and a content viewing area” is much better.)
But if it's a header, a search engine might put less weight on the alt text of an image than if it were right there. It turns out that there's a trick we can do with CSS to achieve this. First, write out the HTML as it would appear to a search engine or user with a screenreader:
<header>
<h1>Frank's Flowers</h1>
</header>
Then we can put the image as a background on the h1 and dedent the text out of view:
h1 {
width: 300px;
height: 100px;
background: url(Resources/Header.png) no-repeat;
text-indent: -10000px;
}
Ta-da! Unfortunately, it's harder to combine this approach with scaling the image. In newer browsers, you can use background-size, but that was only introduced in CSS 3. For greatest compatibility, you may want to consider using plain text where possible and aligning that over a decorative background or just not scaling it.

HTML <td> element with CSS padding and border. Would like to set <td> margins to space the rows out

I have a table which looks like this (in html):
<div id="product_grid_one">
<table>
<tr>
<td>
<div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
<div class="productdescription"><p>Perfume spray bottle</p></div>
<div class="productprice"><p>$4.99</p></div>
</td>
<td>
<div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
<div class="productdescription"><p>Perfume spray bottle</p></div>
<div class="productprice"><p>$4.99</p></div>
</td>
<td>
<div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
<div class="productdescription"><p>Perfume spray bottle</p></div>
<div class="productprice"><p>$4.99</p></div>
</td>
<td>
<div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
<div class="productdescription"><p>Perfume spray bottle</p></div>
<div class="productprice"><p>$4.99</p></div>
</td>
</tr>
</table>
</div>
And here is the CSS for it:
td { width: px; padding: 14px; border: 1px solid #c0c0c0; margin: 14px; }
Basically there is one row with four cells. Each cell has a vertically stacked image,
text description of the product, and product price. Now, around this three-piece stack
I want my td element (which I presume can be treated as a block), to have a padding of
14px, which I can set no problem, so that there is a 1px border 14px away from the
stack of image, text, and price. No problem till here.
The problem is that in the above, the margin is not being set!!#
I could set margin: 200px; and there still would be no difference, the margin is
about 1 or 2 pixels and does not seem to be possible to change this. And I have
tried this on Firefox 13.0.1.
So, how do I set the margin? I would like there to be 14 px between each td in the table.
Can this be attained with CSS?
It has been suggested to use the cellspacing attribute of tables. So I could
make use of the following equivalent CSS:
table { border-collapse: separate; border-spacing: 14px; }
but this is no good to me as I want the border-spacing applied only inside the
table. I do not want any spacing on either side (left or right) of the table as
a whole. Any solutions?
Well, I was able to reach a solution at last. I managed to resolve the issue
with a negative margin so that the border spacing which the table adds around
the table (in addition to in between the various table data and table headers)
does not become visible as it moved out of the way to the left by making use
of the left margin with the negative value.
table { border-collapse: separate; border-spacing: 13px; margin-left: -13px; }
Could you check if
.style { border-spacing: 0px; }
produces any difference? When the dinosaurs walked the Earth, they used
<td cellspacing="0">
but if you do so today, somebody of your colleagues will slap you silly. And if they do, they will probably give you the link to some list of deprecated stuff.

Overflow-x scroll not working in tr

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.

html table should overflow

I have a table with two columns. The first (which contains a menu) should have a
fixed width, while the second (containing some page content) can vary in width. The table should overflow the window (which it doesn't by default), because otherwise the browser reduces the width of the menu column if the content is very broad. But I cannot define a fixed width for the table (causing it to overflow) because I don't know the width of the content.
Overflow:scroll
does not seem to work with tables. I would be thankful for workarounds/solutions.
<table class="rootTableContent">
<tr>
<td id="rootTableMenu">
</td>
<td id="rootTableContent">
</td>
</tr>
The solution to this problem is to use proper CSS (Divs/Spans, etc) to layout your website as opposed to tables. I'm all for using tables to display tabular data and you'll see me arguing for them in places that they're valid, but this is not one of them.
This is easily done with something like this:
<div style="float:left; width: 150px">
Navigation Code Here
</div>
<div style="float: left">
Other Content Here
</div>
<div style="clear:both"></div>
Obviously, I'm oversimplifying this solution, you're going to have more specific code to deal with your layout (need more detail to help more specifically) But, it's important to use the right tools for the job.
As others have stated, please don't use <table> layouts. It's old, clunky, and confuses screen readers and other accessibility software.
If you absolutely insist on using your method, you can try this:
Live Demo
<style type="text/css">
div.wrap {
overflow-y: auto;
width: 75%;
}
div.wrap table {
border: 1px solid #000;
width: 100%;
}
div.wrap table td {
padding: 20px;
}
</style>
<div class="wrap">
<table class="rootTableContent">
<tr>
<td id="rootTableMenu">rootTableMenu</td>
<td id="rootTableContent">rootTableContent</td>
</tr>
</table>
</div>

Html table how to make all columns same height

I want to display 4 or 5 boxes(vary) which occupy's 100% of the page width, so it will span start to end of page. and want height just to fit contents.
I am trying to use table for that so it will assign width for each box and fill up whole row.
Problem with code below is all divs in td are centered and does not have same height. tried all i can think of but it doesn't work. tried vertical alignment, height to 100% .....
How can i have all div in td with same height?
Also if there is another way to doing same please let me know. I am html dummy so may not using the right thing.
<table style="width: 100%; text-align:justify;">
<tr>
<td>
<div style="margin-right:15px; background-color:Gray">
Some text here
</div>
</td>
<td>
<div style="margin-right: 15px; background-color:Gray">
column 2 text here
</div>
</td>
<td>
<div style="margin-right: 15px; background-color:Gray">
Column 3 text here
</div>
</td>
<td>
<div style="background-color:Gray">
Last column text here
</div>
</td>
</tr>
</table>
Like I've told plenty of other people, you shouldn't be using divisions inside table cells.
This will achieve the exact same effect, without the divisions:
<table style="width: 100%; text-align: justify;">
<tr>
<td style="margin-right: 15px; background-color: gray;">
Some text here
</td>
<td style="margin-right: 15px; background-color: gray;">
column 2 text here
</td>
<td style="margin-right: 15px; background-color: gray;">
Column 3 text here
</td>
<td style="background-color: gray;">
Last column text here
</td>
</tr>
</table>
If you get rid of the divs and apply your styles and content directly to the table cells you will get the effect you want.
In case there is no special purpose of using div tag inside td. I would just do it without div. add style to td tag.
Mamu, I would suggest that you do not use inline style elements. Instead of styling your table tags it would be far more efficient, and better to add the the following between your <head> tags:
<style type="text/css">
table {width:100%; text-align:justify;}
table td {margin-right:15px; background-color:gray;}
</style>
Using only those two lines of code you can apply the same elements consistently across your entire website. If you only wanted to apply them to some elements, you could create classes by adding a "." to a name of your choice:
<style type="text/css">
.MyTable {width:100%; text-align:justify;}
.MyTable td {margin-right:15px; background-color:gray;}
</style>
And add the following to your HTML:
<table class="MyTable">
Note that class names are case sensitive. But this reusable code is far more efficient.
Furthermore, I would urge to consider the use of tables only if you are presenting tabular data. Tables load slower and are not SEO friendly. It would not be semantically correct to use them for layout. You should separate content from presentation whenever possible, and if it is layout you are after I would suggest using divs and other elements instead.