i have a html table like:
<table width="100%" cellspacing="1" cellpadding="2" align="center" border="0">
<tr>
<td width="7%"></td>
<td width="21%"></td>
<td width="32%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
</table>
this is working good, but some times if column no 5 has large content then column no 4 shrinks and width of these columns does not remains equal
You need to add
.table{
table-layout:fixed;} and .table tr td{
word-wrap:break-word;
text-align:center;} for applying width and text as per width
.table{
table-layout:fixed;}
.table tr td{
word-wrap:break-word;
text-align:center;}
<table width="100%" cellspacing="1" cellpadding="2" align="center" border="0" class="table">
<tr>
<td width="7%">ew</td>
<td width="21%">ewwe</td>
<td width="32%">weew</td>
<td width="20%">ewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewew</td>
<td width="20%">eweweew</td>
</tr>
</table>
I guess what you are looking for is word-break: break-all; style on your <td>.
.table-style td {
border: solid 1px;
}
.td-break-word {
word-break: break-all;
}
<table class="table-style" width="100%" cellspacing="1" cellpadding="2" align="center" border="0">
<tr>
<td width="7%">text</td>
<td width="21%">text</td>
<td width="32%">text</td>
<td width="20%">text</td>
<td width="20%" class="td-break-word">texttexttexttexttexttexttexttexttexttexttexttexttexttext</td>
</tr>
</table>
Its because you are trying to print a single big string. If there is a space, the words will be broken according to the width automatically. Use the below CSS to fix it.
tr td {
word-wrap: break-word;
}
PS: String will be broken into multiple lines. The row may look long.
Related
screenshot of issue When I print my document every table prints an extra cell right under the table (but just one). I have looked everywhere on the net to find a solution. So far, I haven't been able to find it. I'm using Chrome. I haven't tried anything significant because I can't find the issue on the internet yet. Maybe it is just me. please help.
Here is my code:
<style>
body {padding: 0px;
margin: 0px;
text-align: center;}
.noborder th {font-weight: bold;
border: none;
padding: 0px, 3px;}
.noborder td {font-weight: regular;
border: none;
padding: 0px, 3px;}
table.border {empty-cells:show;}
.border th {font-weight: bold;
padding: 0px, 3px;}
.border td {font-weight: regular;
border: 1px solid gray; }
</style>
<table class="noborder" width="100%">
<th width="50%">Phone: 855-359-9999
<th width="50%">Fax: 888-965-1964
<tr width="100%">
</table>
<p>
<table class="noborder" width="100%">
<tr width="100%">
<td width="15%">___ Outpatient
<td width="15%">___ Office
<td width="15%">___ Inpatient
<td width="15%">___ DME
<td width="40%">___ Ambulatory Surgery Center
</table>
<p>
<table class="border" width="100%" cellspacing="0">
<tr width="100%">
<td width="50%"><b>ICD-10 CM Diagnosis</b>
<td width="50%"><b>Code</b>
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%"><b>Description</b>
<td width="50%"><b>Code</b>
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="50%">
<td width="50%">
<tr width="100%">
<td width="100%" colspan="2"><b>Special circumstances:</b>
<tr width="100%">
<td width="100%" colspan="2">
<tr width="100%">
<td width="100%" colspan="2">
<tr width="100%">
<td width="100%" colspan="2"><b>Clinical Information:</b>
</table>
I guess you forgot to add closing tags to tr and td, like:
<tr>
<td>
some stuff between
</td>
</tr>
I copy pasted your code into the text editor and it does not have closing tags but I don't have a problem as shown on your image. I opened the inspector in the browser and saw that browser put all the closing tags.
Just add closing tags to all trs and tds, and everything should work as intended.
I have the following 2x1 cell where I have an image in cell 1 and text in cell 2. I want rounded corners such as the examples found here. I used border-radius but I still have hard corners. I cannot use CSS as this is for a newsletter that will be emailed out. I appreciate any insight.
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150" style="border-width: 0px" src="http://www.path.com/to/image.png"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span style="font-family: trebuchet ms,verdana,arial,helvetica,sans-serif; font-size: 12px;">
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</table>
The issue is with border-collapse: collapse; you need to use the border-collapse: separate;
<html>
<head>
<style>
td > span {
font-family: trebuchet ms,verdana,arial,helvetica,sans-serif;
font-size: 12px;
}
td > img {
/* border-width: 0px; */
border-radius: 15px 0 0 50px;
}
body > table {
border-collapse: separate;
border-radius: 15px 50px;
border: 3px solid #000;
}
</style>
</head>
<body>
<table width="723" cellspacing="0" cellpadding="0" >
<tr>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150"src="http://via.placeholder.com/275x150"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span>
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
Results in:
You can see documentation about the different styles of border on tables at https://www.w3.org/TR/CSS21/tables.html#separated-borders and https://www.w3.org/TR/CSS21/tables.html#collapsing-borders. The snippet above should work in an email or as a stand alone page but would recommend separating the CSS for a standalone page.
Change your table tag from
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
to
<table border="3" width="723" cellspacing="0" cellpadding="0" >
And use this CSS
table {
border: 2px solid;
border-radius: 25px;
}
If you only want this rounded corner on the outer table, then give it an ID or a class and reference the new ID or class in the CSS instead of referencing all table elements.
I have a following layout. I want all the TDs of equal width and extra space around them.
If I use float:left; over TDs all get equally sized but then vertical-align: middle; stops working.
Is there a way I can do it without using float:left;?
<table class="student_table">
<tr>
<th class="class_box" colspan="4">Batch 2012</th>
</tr>
<tr class="batch_header">
<td> Hi </td> <!--Have to center this-->
<td> Hi </td>
<td> Hi </td>
<td> Hi </td>
</tr>
.batch_header{
width: 245px;
display: inline-block;
}
.batch_header td{
width:30px;
height:30px;
background-color:#EEE;
margin:0px;
padding:2.5px;
border:0px;
<!-- float:left; --> <!-- < equally sized with this but not vertically aligned is not working-->
font-weight: bold;
font-size: smaller;
text-align:center;
vertical-align: middle; <!-- < This is not working-->
}
No CSS needed because you are using tables and tables own sometimes
Here is the table for you
<table>
<tr>
<th colspan="4" align="center" valign="middle" bgcolor="#CCCCCC">Batch 2012</th>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
<td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
<td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
<td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
</tr>
</table>
Here is a updated demo for you
https://jsfiddle.net/1zhdLb55/3/
EDIT
If you now dont want fixed width just delete the width:100px; and it will still give you space on left and right. If you dont want borders just add border:0 cellspacing:0 etc
Add line-height: 1.9; to .batch_header td{}
.batch_header{
width: 140px;
float: left;
}
.batch_header td{
width:30px;
height:25px;
background-color:#EEE;
margin:0px auto;
float:left;
padding:2.5px;
border:0px;
font-weight: bold;
font-size: smaller;
text-align:center;
vertical-align: middle;
line-height: 1.9;
}
<table class="student_table" border = 1>
<tr>
<th class="class_box" colspan="4">Batch 2012</th>
</tr>
<tr class="batch_header">
<td> Hi </td> <!--Have to center this-->
<td> Hi </td>
<td> Hi </td>
<td> Hi </td>
</tr>
</table>
See Demo
using only HTML
<table width="100%">
<tr>
<th colspan="4" align="center" valign="middle">Batch 2012</th>
</tr>
<tr>
<td width="25%" align="center" valign="middle"> Hi </td>
<td width="25%" align="center" valign="middle"> Hi </td>
<td width="25%" align="center" valign="middle"> Hi </td>
<td width="25%" align="center" valign="middle"> Hi </td>
</tr>
</table>
Try adding the style: table-layout:fixed to your table css style (.student_table) and make sure the table has a set width. Remove the float:left and the td width (it will calculate equal width to all cells) and remove the display: inline-block on the <tr> tag.
How can I move the rows titled "border one" and "border two" to the top and bottom of the cell they reside in? If I try padding top/bottom, it messes up the structure upon zooming in/out.
Here's a fiddle: http://jsfiddle.net/0uzjyxa5/
<table align="center" border="1" cellpadding="0" cellspacing="0" width="680" height="942" style="border-top: 1px solid white;">
<td style="width: 288px; height:auto;">
</td>
<td>
<table border="1" width="100%">
<tr><td>border top</td></tr>
</table>
<table border="1" width="100%">
<tr><td>venue info</td></tr>
</table>
<table border="1" width="100%">
<tr><td>border bottom</td></tr>
</table>
<td style="width:17px;"></td>
</td>
</table>
You can align your table data using
table td {
vertical-align: bottom;
}
or
table td {
vertical-align: top;
}
I have a HTML table.
1st row has 5 elements while 2nd row has only 3 elements.
Why 3 columns of the 2nd row gets the width same as width of respective columns in previous row?
I mean since there are only 3 columns in 2nd row, are they not supposed to auto-resize to fill the row?
I tried setting the width of 2nd column in 2nd row, but that ALSO increases width of 2nd column in 1st row, which I don't want.
Any help appreciated.
EDIT
Required output
Hey now used to colspan
as like this
<table width="100%" cellspacing="0" cellpadding="0">
<tr class="blue">
<td width="35%"></td>
<td width="15%">SignUp</td>
<td width="15%">Create Blog</td>
<td width="15%">Custimize Blog</td>
<td width="15%">Success</td>
</tr>
<tr>
<td colspan="5">
<table width="100%" cellspacing="5" cellpadding="0">
<tr>
<td class="blue2">Create Blog</td>
<td class="blue3">Custimize Blog</td>
<td class="blue4">Success</td>
</tr></table>
</td>
</tr>
</table>
Css
table tr td{
text-align:center;
}
.blue{
background:lightblue;
}
.blue2{
background:red;
}
.blue3{
background:blue;
}
.blue4{
background:green;
}
live demo http://tinkerbin.com/vqnhht02
and now change to width or height according to your design
Try this:
`<table width="100%" cellspacing="0" cellpadding="0">
<tr class="blue">
<td width="20%"></td>
<td width="15%"></td>
<td width="15%">SignUp</td>
<td width="15%">Create Blog</td>
<td width="15%">Custimize Blog</td>
<td width="15%">Success</td>
</tr>
<tr>
<td class="blue" colspan="2">Create Blog</td>
< td class="blue" colspan="2">Custimize Blog</td>
<td class="blue" colspan="2">Success</td>
</tr>
</table>`
Give the background color as per your need.
This width issue is fixed I think.