I have added a <h4> tag in a <td> element and rotated 90 degrees,
so that both the <td> and <h4> are rotated.
Issue:
If my <h4> content is bigger or contains a space it comes in a new line.
How I can fix this? I need to put all the content in a single line in the <td>.
nowrap Attribute is what you need.
<table>
<tr>
<th>Poem</th>
<th>Poem</th>
</tr>
<tr>
<td nowrap><h4>Never increase, beyond what is necessary</h4></td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>
</table>
Related
Currently trying to align an image to the bottom of it's table. At present it reverts to the top naturally. I've tried everything but the image still sits to the top of the table.
</table>
<td class="logo-label">
<table>
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" height="36" width="113">
</td>
</table>
I know it will be something simple but at the moment I cannot get my head around why the image isn't moving.
First of all, the HTML structure is completely wrong. <td> and </td> are table cells, so they lie between <tr> and </tr> (table rows). <tr> and </tr> lie in between <table> and </table> (the table itself). The structure of a table is shown below:
<table>
<tr>
<td>Cell contents here</td>
</tr>
</table>
You can have as many <tr>s and <td>s as you wish.
A table by default has no width. Put in another way, its width is set to auto, i.e. it takes the width of its contents. Set the width and height attributes to avoid this. A table also has no borders by default. Set border="1" to make the borders visible.
To align an image to the bottom of its parent element (<td> in this case), one way to do it is to set position:relative for the parent element and set position:absolute for the child element. Then, set bottom:0 for the child element. The image will then be aligned to the bottom of the element. The snippet below sums up the whole process.
<table border="1" width="500" height="300">
<tr>
<td style="position: relative">
<img style="position:absolute; bottom:0" src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>
There may also be some rules in your logo-label CSS rule, which we don't know about.
First of all, that is a real mess you have. Secondly, you need to look at your CSS file and look up what "logo-label" is doing. That is controlling the alignment of the image.
<table>
<tr>
<td class="logo-label">
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>
I have a table in the below format
<tr >
<td>
<span class="boldText">OfficeType</span>
</td>
<td>
<p class="mb0">BDA REGISTRATION INVESTIGATION & CORRECTIONS</p>
</td>
</tr>
.mb0 {
margin-bottom: 0px;
}
The expectation is the text OfficeType and BDA REGISTRATION INVESTIGATION & CORRECTIONS should appear in the same line with extra text to wrap to the next line.The text wraps to the next line but the OfficeType and BDA REGISTRATION are not aligned in the same line.Can you please help me in this,what am I doing wrong here?
Add valign=top to TD elements
<tr>
<td valign=top>
<span class="boldText">OfficeType</span>
</td>
<td valign=top>
<p class="mb0">BDA REGISTRATION INVESTIGATION & CORRECTIONS</p>
</td>
</tr>
Unlike p tag, span does not have a css attribute of
"display:block"
so you can add it to p tags style to have equal line height
If you press F12 and take a look at the box model you'll see that p comes with a default top margin but span doesn't.
The simplest way to deal with this is to be consistent with your use of p and span tags across all cells.
I'm trying to write some HTML/CSS to display a certain row with some of the elements left-aligned and some of them in the center. This was my HTML code:
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<div class="mid">
<td> Subtotal </td>
<td> Tax </td>
<td> Total </td>
</div>
</tr>
And this is my CSS code:
.mid {
text-align: center;
}
.mainInfo {
font: bold 13px Tahoma;
}
#header {
background-color: #68891;
color: white;
}
But the last three elements are not moving to the center, and I really don't understand why not. I tried putting class="mid" in the <td> tags and that worked, but doesn't that defeat the purpose of DRY?
Fiddle Demo
You cannot put a div instead of td element.
You should validate your HTML code with w3 validator.
If you'll do so you'll see you get this error message:
document type does not allow element "DIV" here; missing one of "TH", "TD" start-tag
Maybe you can do it this way:
<table>
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<td class="center">Subtotal</td>
<td class="center">Tax</td>
<td class="center">Total</td>
</tr>
</table>
JSFiddle example
No, you should not put divs inside tr's or tables.
And you should not use tr's or td's without table-element.
<table>
<tr>
<td>hello world</td>
<!-- This is bare minimum to use tables properly -->
</tr>
</table>
You can insert whatever(not tr or td, but could start new table) you want inside TD-elements though.
It's possible to use other elements to replace these standard ones with css display-property set to table-row etc., but you should stick to conventional tags.
Use colspan/rowspan to span over multiple table columns or rows.
CSS classes are designed to be used as often you need/want to. Only IDs should appear once per page.
Of course you should always keep the DRY concept in mind but in your case it's totally fine. It wouldn't if you would set your .mid class to every <td> because in that case you could just set the properties directly to the <td> element.
middle is not a valid value for text-align, so I'm going to assume, in your CSS, that's meant to be vertical-align. If so, it's because vertical-align will only apply to table cells, not divs - that would explain why it is only being successfully applied to your tds.
Additionally, you shouldn't really put a div inside a table (and shouldn't put a td inside of that) but that's not related to your problem.
Assign one class for left alignment and other for center like so...
.left {
text-align:left;
}
.center {
text-align:center;
}
Asign class to TD elements
<tr class="mainInfo" id="header">
<td class='left'> Item </td>
<td class='center'> Color </td>
</tr>
I have a table structure like below:
<table>
<tr>
<td>
<div id="FirstDiv">
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>
</td>
<td>
<div id="SecondDiv">
</div>
</td>
</tr>
</table>
The structure of FirstDiv and SecondDiv are same. The td tag inside FirstDiv contains some text and I am showing the text (Text is dynamic one,it is coming from back end.) using anchor tag but if the text is more wider than 150px, it is pushing the border to right. According to requirement, there should not be any horizontal scroll bar so, I tried to wrap the text inside the anchor tag, giving styles like word-wrap:normal, but till now not able to fix it. Its either giving me a horizontal scroll bar or pushing the border to right.
Thanks in advance.
Try this:
table {table-layout:fixed}
td {width:50%}
Here is my html but when I measure the last td its way longer then 300px...any idea?
<table width='400'>
<tr>
<th colspan='2' style='text-align:left;'><br /><br />Beginner<br /><br /></th>
</tr>
<tr>
<th>Title</th>
<th>another Deal</th>
<th>Users</th>
</tr>
<tr>
<td>SomeDat</td>
<td>0/38</td>
<td style="width:300px">
<span class="red"></span> <span class="yellow"></span></td>
</tr>
<tr>
<td>Git</td>
<td>28/38</td>
<td style="width:300px">
<span class="red">something,something,something,something,something,something,something,something,something,something,something, ,something,something,something,something,something</span> <span class="yellow">test</span></td>
</tr>
</table>
The table will expand to the width needed for its widest element. "something,something,..." is a very long unbreakable word, and is forcing your table wider than you want it.
If you add spaces, the text will wrap. If you want to clip long unbreakable words, try overflow:hidden in the style.
As Ned said, the long word is causing the cell to expand.
You can partially solve this by adding word-wrap: break-word; to the style attribute of the table cell. This will cause the word to break when it reaches the limits of the table cell. Fully supported in IE and any CSS3-supporting browsers.