I am trying to vertically center text inside my TDs.
I have tried the following but I'm unable to achieve desired results.
<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: 140px;
float: left;
}
.batch_header td{
width:30px;
height:25px;
background-color:#EEE;
margin:0px;
padding:2.5px;
border:0px;
float:left;
font-weight: bold;
font-size: smaller;
text-align:center;
display: inline-block;
vertical-align: middle; <!-- < This is not working-->
}
Just Remove
float:left;
from
.batch_header td{ }
.batch_header{
width: 140px;
float: left;
}
.batch_header td{
width:30px;
height:25px;
background-color:#EEE;
margin:0px;
padding:2.5px;
border:0px;
font-weight: bold;
font-size: smaller;
text-align:center;
vertical-align: middle; <!-- < This is not working-->
}
<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>
JSFiddle Demo
Note: I have given border to table for visibility purpose.
Update:
Please see Demo2 Here
Just Added line-height: 1.9; in CSS
If you take out the display: inline-block; and float: left; lines, it will look the way you want.
No CSS needed because you are using tables and tables own sometimes
Here is the table for you
<table width="200">
<tr>
<th colspan="4" align="center" valign="middle">Batch 2012</th>
</tr>
<tr>
<td align="center" valign="middle"> Hi </td>
<td align="center" valign="middle"> Hi </td>
<td align="center" valign="middle"> Hi </td>
<td align="center" valign="middle"> Hi </td>
</tr>
</table>
Here is a demo for you
https://jsfiddle.net/1zhdLb55/1/
Related
I'm working on learning HTML, CSS, and JS on the side, but started messing around with making a new email signature at work and am running into an issue I'm hoping someone can help me out with.
What I'm hoping for:
What I'm getting: https://codepen.io/spacemanspiff_/pen/GRQzwQa
.verticalLine {
border-left: 15px solid #00205b;
height: 500px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 0px;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
.container {
display: inline-flex;
}
.table1 {
margin-right: 20px;
}
body {
margin: 0;
font-family: "Fira Sans", ariel;
}
p {
white-space: nowrap;
}
<body>
<div class="container">
<table class="table1">
<tbody>
<tr>
<td><img src="ProfilePic.png" width="344" height="344" alt="profile phoot"></td>
<td rowspan="2">
<div class="verticalLine"></div>
</td>
</tr>
<tr>
<td align="center"><img src="LogoPlaceHolder.png" width="240" alt="korhorn financial group logo"></td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr>
<td>
<p style="font-size: 75px; color: #00205b;">Employee Name</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px; font-weight: 200;">Employee Role</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>e.</strong>  email#address.com</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>p.</strong>  111-222-3333</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>w.</strong>  www.website.com</p>
</td>
</tr>
<tr>
<td><img src="mapPin.png" width="45px" height="45px">   <img src="yt.png" width="45px" height="45px">   <img src="facebook.png" width="45px" height="45px">   <img src="Instagram.png" width="45px" height="45px">   
<img
src="Twitter.png" width="45px" height="45px"></td>
</tr>
</tbody>
</table>
</div>
</body>
I hate drag on about the things I've tried because I imagine you'll see it my code, but essentially what I was thinking I needed to do was put two tables inline. On the left would be the employee's profile pic and the logo below it, and a blue bar in the next column. In the second table would be the employee details and any appropriate links. What I'm getting is the rows in the 2nd table are ending up much larger than I want them, and I'm just not understanding why.
I guess what I was hoping for with the two tables was the ability to keep the information on the 2nd table tighter together, while allowing the info in the 1st table to span multiple rows. This could be the wrong approach altogether, so I'm open to any suggestions!
Thanks for the help!
Do you know how to inspect a document with your browser? Doing so shows that your paragraphs have a default size, mainly due to line height and margin, that is dramatically larger than the text itself.
Either don't use paragraphs or set their line height to zero or another small value and reduce margin. You'll then need to adjust margin on nearby elements to space them back out as needed.
.verticalLine {
border-left: 15px solid #00205b;
height: 500px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 0px;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
.container {
display: inline-flex;
}
.table1 {
margin-right: 20px;
}
body {
margin: 0;
font-family: "Fira Sans", ariel;
}
p {
white-space: nowrap;
line-height: 0;
margin: 5px;
}
<body>
<div class="container">
<table class="table1">
<tbody>
<tr>
<td><img src="ProfilePic.png" width="344" height="344" alt="profile phoot"></td>
<td rowspan="2">
<div class="verticalLine"></div>
</td>
</tr>
<tr>
<td align="center"><img src="LogoPlaceHolder.png" width="240" alt="korhorn financial group logo"></td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr>
<td>
<p style="font-size: 75px; color: #00205b;">Employee Name</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px; font-weight: 200;">Employee Role</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>e.</strong>  email#address.com</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>p.</strong>  111-222-3333</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>w.</strong>  www.website.com</p>
</td>
</tr>
<tr>
<td><img src="mapPin.png" width="45px" height="45px">   <img src="yt.png" width="45px" height="45px">   <img src="facebook.png" width="45px" height="45px">   <img src="Instagram.png" width="45px" height="45px">   
<img src="Twitter.png" width="45px" height="45px"></td>
</tr>
</tbody>
</table>
</div>
</body>
I have two tables with same width and number of <td> in one row with same css for both tables but as you see in snippet first column of both tables are aligned properly but other columns are shifted left from heading
Here i want a table with fixed headings at top and content part has scroll if content height is more than 100px.
.headings,
.contents {
list-style-type: none;
padding: 0;
width: 100%;
margin: 0;
}
.headings td,
.contents td {
width: 20%;
padding: 10px;
}
.content-subblock {
max-height: 100px;
overflow: auto;
}
<div class="content-block">
<div class="container">
<div class="content-subblock">
<table class="headings">
<tr>
<td>heading1</td>
<td>heading2</td>
<td>heading3</td>
<td>heading4</td>
<td>heading5</td>
</tr>
</table>
</div>
<div class="content-subblock">
<table class="contents">
<tr>
<td>link1</td>
<td>link2</td>
<td>link3</td>
<td>link4</td>
<td>link5</td>
</tr>
<tr>
<td>link6</td>
<td>link7</td>
<td>link8</td>
<td>link9</td>
<td>link10</td>
</tr>
<tr>
<td>link11</td>
<td>link12</td>
<td>link13</td>
<td>link14</td>
<td>link15</td>
</tr>
<tr>
<td>link16</td>
<td>link17</td>
<td>link18</td>
<td>link19</td>
<td>link20</td>
</tr>
</table>
</div>
</div>
</div>
I think may be it's due to scroll on the right side of second table,Can anyone suggest me how can i align both <td> of heading and content table in one vertical column
I use jQuery to make this happen please check that if this is what you
are looking for. you can try removing some data rows it will not show
scroller
CODEPEN LINK
[https://codepen.io/feizel/pen/QQZqpR?editors=1111][1]
var contentHeight = jQuery(".faizal--block").outerHeight();
var absoluteHeight = 100;
if(contentHeight > absoluteHeight){
jQuery('.faizal--block').addClass('scrolling');
jQuery('.headings').css('width', 'calc(100% - 15px)');
}else {
jQuery('.headings').css('width', 'calc100%');
}
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.headings{
list-style-type: none;
padding: 0;
width: 100%;
margin: 0;
}
.contents {
list-style-type: none;
padding: 0;
width: 100%;
margin: 0;
}
.headings td,
.contents td {
width: 20%;
padding: 10px;
}
.content-subblock {
overflow: auto;
background-color:white;
}
.scrolling{
max-height:100px;
}
.scrolling_none{
height:auto;
overflow:hidden;
}
.headings td, .contents td{
padding:0;
background:red;
border:none;
color:#fff;
text-indent:15px;
}
.headings td{
background:#bc2d2d;
}
.contents td{
background:grey;
}
.headings{
background:red;
font-weight:bold;
background:#bc2d2d;
}
td{
height:50px;
border:3px solid #333 !important;
font-size:16px;
padding:0 !important;
width:300px !important;
line-height:50px;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-block">
<div class="container">
<div class="content-subblock">
<table class="headings" cellspacing="0" cellpadding="0">
<tr>
<td>heading1</td>
<td>heading2</td>
<td>heading3</td>
<td>heading4</td>
<td>heading5</td>
</tr>
</table>
</div>
<div class="content-subblock faizal--block">
<table cellspacing="0" cellpadding="0" class="contents">
<tr>
<td>link1</td>
<td>link2</td>
<td>link3</td>
<td>link4</td>
<td>link5</td>
</tr>
<tr>
<td>link1</td>
<td>link2</td>
<td>link3</td>
<td>link4</td>
<td>link5</td>
</tr>
<tr>
<td>link1</td>
<td>link2</td>
<td>link3</td>
<td>link4</td>
<td>link5</td>
</tr>
<tr>
<td>link1</td>
<td>link2</td>
<td>link3</td>
<td>link4</td>
<td>link5</td>
</tr>
</table>
</div>
</div>
</div>
The width of the tables are not the same due to the overflow scrollbar on the bottom table. You can add the following declaration to your content-subblock header div element to ensure the widths are consistent. You may just want to add it to both to ensure a scroll bar is always present if this is dynamic content:
.content-subblock {
max-height: 100px;
overflow-y: scroll;
}
However, it would be much better to just combine the tables.
<table>
<tr>
<th>header</th>
</tr>
<tr>
<td>data</th>
</tr>
</table>
Why You are using heading in separate table,this is not good practice.
use below one.
<style>
.container{
width:100%;
height:100px;
overflow:auto;
}
td{
border:1px solid;
}
.header{
width:calc(100% - 17px);
width:-webkit-calc(100% - 17px);
width:-moz-calc(100% - 17px);
height:25px;
background:#000;color:#fff;
}
</style>
<table class="header">
<tr height="25">
<td width="50%">header</td>
<td width="50%">header</td>
</tr>
</table>
<div class="container">
<table style="width:100%; ">
<tr height="25">
<td width="50%">body</td>
<td width="50%">body</td>
</tr>
<tr height="25">
<td width="50%">body</td>
<td width="50%">body</td>
</tr>
<tr height="25">
<td width="50%">body</td>
<td width="50%">body</td>
</tr>
<tr height="25">
<td width="50%">body</td>
<td width="50%">body</td>
</tr>
<tr height="25">
<td width="50%">body</td>
<td width="50%">body</td>
</tr>
<tr height="25">
<td width="50%">body</td>
<td width="50%">body</td>
</tr>
<tr height="25">
<td width="50%">body</td>
<td width="50%">body</td>
</tr>
<tr height="25">
<td width="50%">body</td>
<td width="50%">body</td>
</tr>
<tr height="25">
<td width="50%">body</td>
<td width="50%">body</td>
</tr>
<tr height="25">
<td width="50%">body</td>
<td width="50%">body</td>
</tr>
</table>
</div>
There is everything fine but i'm not able to remove useless space. How to remove it anybody can solve it
By the way i have given picture below which part i want to remove there is useless white space and some space around phone area.
<table style="width: 100%; border: 10px solid #bdbdbd; background: #fff; font-family: Arial, Helvetica, sans-serif; color: #444;">
<tr>
<td width="50%" valign="top" border="0px">
<div id="masterEmailData">
<table style="background:#e7e7e7; height:auto; width:100%; height:100vh;">
<tr>
<td style="text-align:center"><img src="{9}/Content/content/image/logo1.png" class="img-responsive" style=" padding:0px 5px; max-width:250px;" /></td>
</tr>
<tr>
<td>
<p style="text-align: center; background:#074f8e; padding:12px; color:#fff; font-size: 18px; margin: 5px 0">Phone</p>
</td>
</tr>
<tr>
<td style="text-align:center"><img src="../Content/content/image/emailImg.png" style=" padding:0px 5px; max-width:250px;" /></td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Thanks You!
What you are looking for are the properties cellpadding and cellspacing. Set them to 0 and the white space should be gone.
Here is an explanation what they actually do.
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.
I want to place text on top of an image that I placed in a table cell.
I tried to use the z-index but the text keeps appearing under the image.
I created a class called p1 that positioned the image relative(not sure how I should handle this inside of a table) and the z-index -1.
I then added the class id in the table cell tag.
What I have so far:
.font1 {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
text-align: left;
}
.hangingindent {
padding-left: 100px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
.hangingindent2 {
padding-left: 75px;
}
.p1 {
position: relative;
z-index: -1;
}
.backbox {
z-index: -1;
position: relative;
left: 0;
right: 0;
botton: 0;
}
.text {
z-index 100;
color: #0000000;
font-size: 14px;
position: absolute;
top: 100px;
right: 200px;
overflow: hidden;
}
<table width="1013" border="0" align="center" cellpadding="0">
<tr>
<td colspan="5">
<img src="images/images2/header.gif" width="1013" height="642" />
</td>
</tr>
<tr>
<td colspan="5">
<img src="images/images2/menu-grid.gif" width="1013" height="232" />
</td>
</tr>
<tr>
<td width="55"> </td>
<td width="231">
<img src="images/images2/solutions.jpg" width="204" height="46" />
</td>
<td width="233">
<img src="images/images2/capabilities.jpg" width="204" height="46" />
</td>
<td width="232">
<img src="images/images2/art services.jpg" width="204" height="46" />
</td>
<td width="254">
<img src="images/images2/contact us.jpg" width="204" height="46" />
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5" class="hangingindent2">
<img src="images/images2/WELCOME.gif" width="500" height="100" />
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5" class="hangingindent">
<p>Since 1968, Packaging Products Corporation (PPC) has been a leader in the flexographic printing and converting industry.
<br />Our focus on emerging technologies in film substrates, ink systems, and controlled atmosphere packaging, enables us to
<br />provide the highest quality products at the most competitive prices.</p>
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5">
<div class="backbox">
<img src="images/images2/bottom2.gif" width="1013" height="810" />
<div class="text">This is a test to see where the text will land</div>
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
As I got from your question is you want to put text over an image. So to do it, there is no need to use z-index. you can do it by setting absolute position of p tag and make td tag as position relative.
demo for it is you can use the link
<table>
<tr>
<td>
<p>Hello</p>
<img src="http://www.freakypic.in/wp-content/uploads/2014/08/flower-images.jpg" />
</td>
</tr>
</table>
CSS:
img {
width:200px;
}
td {
border:2px solid red;
position:relative;
}
p {
position:absolute;
color:yellow;
font-size:30px;
top:0px;
left:70px;
}
You can change the markup little bit.!Z-index will work with position set to other than static (which is default).
Here, you can remove the <img> tag & display the image as background image.
Other solution wrap the text in <p> or <div> & make it position: absolute & immediate parent <td> as position:relative (This is mentioned earlier already)
little code explanation
exp1 -- background-image
td {
background-image: url("");
background-position: left top fixed;
}
exp1 - HTML markup
<td>Data to be there on top of the image</td>
Please check this link! - JSFIDDLE