I am trying to use table element to align text to print to A4 page using the plain HTML i got perfect alignment which prints perfectly in a paper but when printing another name td is resized and i lose paper alignment as i have tapleted paper with fields like name already printed so i need right aligment so it would print in the same section on the paper.
any solution for this?
<table width = 100% border =1>
<tr>
<td> </td>
<td> </td>
<td align = "right"><my><?php echo $name;?></my></td>
<td> </td>
<td> </td>
<td> </td>
<td align = "center"><my><?php echo $rollno;?></my></td>
<td> </td>
<td> </td>
</tr></table>
You can set table-layout: fixed property for table element and width: ? (where ? stands for the width value you want to provide) for your td element.
By the way, html attribute value should be always enclosed with quotes, for example: border="1".
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>
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%}
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;