This has been driving me crazy, sadly haha. I can't figure out why I can't make the "X's" in my table align with the bottom of the table... I've tried putting vertical-align in different places in the CSS, but to no avail :(. Also am I using correctly for blank spots in my table?
Here are snips of both my HTML and CSS files...any comments would be greatly appreciated
<html>
<head>
<title>Day4: Table King</title>
<link rel="stylesheet" type="text/css" href="stylesday4.css" />
</head>
<body>
<table id="products">
<tr>
<th><span></th>
<th>Free Version</th>
<th>Lite Version</th>
<th>Full Version</th>
</tr>
<tr>
<td>Advertising</td>
<td id="td">X</td>
<td><span></td>
<td><span></td>
</tr>
<tr class="alt">
<td>Catering Software</td>
<td><span></td>
<td id="td">X</td>
<td id="td">X</td>
</tr>
....
#products
{
border-collapse:collapse;
width:100%;
}
#products th, #products td
{
border:1px solid #0000FF;
background-color:#C0C0C0;
padding:3px 2px 7px 5px;
}
#products th
{
font-size:20px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#0000FF;
padding-top:4px;
padding-bottom:5px;
background-color:green;
}
#products td
{
vertical-align:bottom;
}
#products tr
{
text-align:center;
color:#0000FF;
}
#products tr.alt td
{
color:blue;
background-color:#A7C942;
}
You could use position: relative on your td and table, then move the td to the bottom by using bottom: 0px.
However, I think this website should answer your question a bit more clearly: http://shouldiusetablesforlayout.com
With the HTML and CSS you have provided the vertical aligning seems to be working as I'd expect. I set up a little test on jsfiddle here http://jsfiddle.net/dttMd/ . I put some line breaks in the first row to confirm that the following text was bottom aligning. If this isn't what you are after could you clarify what exactly it is that you need.
As for the empty cells, what you are doing is wrong since <span> elements need to have a closing tag. My personal preference is just to put in a into the cells. I don't think there really is a "right" way though necessarily (though I am happy to be corrected).
that's because you have a 7px bottom padding in the td. You can change it to
padding:3px 2px 0 5px;
and the spacing is gone.
http://jsfiddle.net/6AAvH/2/
Padding can mess with layout and height/width. Get rid of the padding from your td and give it a height instead.
Sometimes line height can make it seem like it's not aligning to the top or bottom. If your font size is less than its container, it might be inheriting the line height. If you set the line height to the font size (or just line-height: 1) and give the td a height, that should do the trick.
<td height="18" valign="bottom" style="font-size:9px; line-height:9px;">TEXT</td>
Your <span> is missing the closing </span>, and you shouldn't be using a span to take up space since it is an inline element. For tables, you shouldn't even need a placeholder, but if you are more comfortable you can use or if you want it to inherit some kind of padding/margin style, you can use that element (<p> </p> or <h3> </h3>).
You can just simply add valign="bottom" in every td and this will make content to be aligned at the bottom and is supported by every browser in the world!
Hope this would help you.
Related
I am trying to pick a specific width for a td element. When i use style such asd
<style>
td.ex{
width:105px;
}
</style>
and then apply that to the td element like this
<td class="ex">
</td>
it doesnt do anything however if i do this
<style>
td{
width:105px;
}
</style>
it applies it to all td elements which is not what i want. Any help would be appreciated.
Targeting by classname works just fine.
td.ex{
width:105px;
border: 1px solid black;
}
<table>
<tr>
<td class="ex">asdf</td>
</tr>
</table>
I assume this is not possible. You can't change only one <td>'s width, while others have different size, since all cells in a column must have the same size (if your table has only one row, this is true). You didn't show your HTML code, so we don't know if this is the case.
However, you can change each <td>'s padding one-by-one to whatever you want. This can also reduce the cell's size, but the <td> element will actually fit the column's width - which is similar to what you want, I think.
I'm using a library that generates tables with headers like this
<th>
<span class="xxx">header title</span>
<span class="sort_icon"/>
<input text (optional, depending on column definition for filtering) class="yyy">
</th>
what I would like to do is with pure css make the header title and sort icon align to top of the th element, and input element if present to the bottom of th element.
My problem is that vertical-align can be set only to th element and thus making both spans and input to go top or bottom, but I cannot figure out a way to align differenty spans and input
Usually in this type of situation it's easier to use absolute positioning:
<style type="text/css">
.th
{
position:relative;
}
.xxx
{
position:absolute;
top:0px;
left:0px;
}
.yyy
{
position:absolute;
bottom:0px;
left:0px;
}
</style>
The only drawback is you have to make sure the height of the th is enough to accomodate the sort icon. That's pretty easy - just set a height and any necessary margin/padding on it, or on the th.
Fixid position is an option, but it is going to be hard to keep the input box on the bottom since you don't know how much content will be in the header. It might go on 2 lines and others on 1.
You might try something in like in the example below. The span tags aren't block elements so you cannot move the so easely. Therefor, use display:block and then work with margins and padding.
PS.: better use css file... inline styles are just for example
<table>
<tbody><tr>
<th style="
max-height: 100px;
background-color: red;
vertical-align: top;
">
<span class="xxx" style="
display: block;
">header title</span>
<span class="sort_icon" style="
display: block;
margin-top: 200;
">
<input text="" (optional,="" depending="" on="" column="" definition="" for="" filtering)="" class="yyy">
</span></th>
</tr>
</tbody></table>
I want to remove the padding between the rows and between the two lines of text:
<br />
Please see the explanation below:
http://79.170.44.112/activate-enterprise.co.uk/wp-content/uploads/2014/09/meet-the-team-image.jpg
My table html can be seen at: http://jsfiddle.net/63nzsht1/
My webpage can be seen at:
http://79.170.44.112/activate-enterprise.co.uk/meet-the-team/
The text is in a separate row (both lines of text in the same cell).
Many thanks!
P.S. Tried
cellpadding="0" cellspacing="0"
But I'm still getting the spacing issue, think it must be being pulled from somewhere else?
There are multiple things causing a gap between the image and the text:
Because images are displayed inline, there is a reserved gap beneath inline elements to make way for letter descenders. Display your images as blocks or alter their vertical alignment to lost the gap.
Your table cells display their content in the middle, vertically, by default. So your text is vertically aligned in the middle, not the top. They also have a default padding, remove this.
Your table has border spacing by default, which can be removed with border-spacing:
img { display:block; }
table { border-spacing:0; }
td { vertical-align:top; padding:0; }
JSFiddle
Try cellpadding="0" cellspacing="0" properties at the table!
The cellpadding and cellspacing attributes are supported in all major browsers.
<table cellpadding="0" cellspacing="0" >
<tr>
<th>h1</th>
<th>h2</th>
</tr>
<tr>
<td>m</td>
<td>m</td>
</tr>
</table>
table {
line-height:0.8em;
}
td {
padding:0;
margin:0;
vertical-align:top;
}
img {
display:block;
}
http://jsfiddle.net/63nzsht1/9/
Try adding
padding: 0;
line-height: 12px;
to element td which has text in it (define class for that).
http://jsfiddle.net/63nzsht1/10/
You need to set the padding to 0px and set the line height to a specific number:
The distance between lines will change using line height.
th, td {
padding: 0px;
line-height: 10px;
}
<a href="/cilla/" style=" line-height: 1;">
<span style=" display: block; line-height: 1.7;">Managing Director</span>
<span style="display: block;"> Cilla McKay</span>
</a>
one of way to solve ur problem
I am trying to show a checkmark in the top right corner of a td. I can't seem to get it there without expanding the whole tr. This is my table:
<tr style="position:relative;>
<td><p class="mark" style="position:relative; left:10px;></p><input type="text"></td> <-- in this td the icon should be placed.
...more rows...
</tr>
I just tried using a class for the icon and making the tr relative and the td relative but it keeps expanding the td's height.
Any ideas?
You can use first-child selector and background-position attribute to show icon on right top of first td
tr:first-child td:first-child
{
background-image:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png');
background-position:right top;
background-repeat:no-repeat;
padding-right:35px;
padding-top:5px;
padding-bottom:5px;
}
You can shorten this like
tr:first-child td:first-child
{
background:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png') no-repeat right top red;
padding:5px 35px 5px 0
}
JS Fiddle Demo
Since you cannot use a position rule on table cells (prohibited by standards, only strictly enforced by Gecko) you have to use a workaround with another element inside, or use some other solution. Also you shouldn't be generating images for 'semantic' stuff like this, use classes, makes it both easier to generate, and easy to manipulate with JS.
HTML
<table>
<tr>
<td class="checked">...data 1...<br>multiline</td>
</tr>
<tr>
<td>...data 2...</td>
</tr>
<tr>
<td class="checked">...data 3...</td>
</tr>
</table>
CSS
td{
background:#fcf4cf;
}
td.checked:before {
content:url(http://www.kyoceradocumentsolutions.com.au/Style%20Library/en-us/Images1/TickMark.gif);
float:right;
padding-left:4px;
}
See this work on JSFiddle
This is compatible with all major browsers and semantically more correct than your current approach, with shorter CSS and HTML.
It is kind of wierd but in my table cell I have a bullet point which for some strange reason it causes the text to align in the center of the cell even though I have no include text-align center or anything of the sort. To be honest all of the other table columns which by the way do not include bullet points align to the left as normal but for the column which contains a bullet points, its causes the text to the align center and I do not know why this is.
My question is does the <ul> tag cause the text to align center by default within a table cell or is there something which is somehow contradicting with the <ul> tag and hence it is aligning the text to the center?
Below is the table (cut down code):
<table id="tableqanda" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="11%" class="image">Image</th>
</tr>
</thead>
</table>
<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
<tbody>
<?php
foreach ($arrQuestionId as $key=>$question) {
echo '<tr class="tableqandarow">'.PHP_EOL;
echo '<td width="11%" class="imagetd">'. ( ( empty ($arrImageFile[$key]) ) ? " " : '<ul class="qandaul"><li>'.htmlspecialchars( is_array( $arrImageFile[$key] ) ? implode(",", $arrImageFile[$key]) : $arrImageFile[$key] ) ). '</li></ul></td>' . PHP_EOL;
echo '</tr>'.PHP_EOL;
}
?>
</tbody>
</table>
Below is the css which includes css for table:
.imagetd{
font-size:75%;
}
.qandaul{
list-style-type:square;
}
#tableqanda_onthefly_container
{
width:100%;
overflow-y: auto;
overflow-x: hidden;
max-height:500px;
}
#tableqanda_onthefly
{
width:100%;
overflow:auto;
clear:both;
}
#tableqanda_onthefly td
{
border:1px black solid;
border-collapse:collapse;
}
#tableqanda, #tableqanda_onthefly{
border:1px black solid;
border-collapse:collapse;
table-layout:fixed;
word-wrap:break-word;
}
#tableqanda{
width:100%;
margin-left:0;
float:left;
}
#tableqanda td {
vertical-align: middle;
border:1px black solid;
border-collapse:collapse;
}
#tableqanda th{
border:1px black solid;
border-collapse:collapse;
text-align:center;
}
.tableqandarow{
border:1px black solid;
border-collapse:collapse;
}
Due to common defaults in browsers, a ul element is normally displayed as indented. This may depend on different CSS properties in different browsers, so you may need several CSS declarations to remove the indentation. For example, the indentation might take place due to default left padding, or due to default left margin. A fairly safe approach is the following (assuming you wish to remove default vertical spacing around the element, too):
ul, ul li { margin: 0; padding: 0; }
ul { margin-left: 1.3em; }
The second rule is there to reserve room for the list bullets. The bullet appears on the left of the li item content, so some space is needed for it. The value of 1.3em tends to give a balanced appearance, with roughly equal spacing on the left and on the right of the bullet.
does the <ul> tag cause the text to align center by default within a table cell?
No, the UL tag adds a left-margin, which may cause the list items to appear center.
is there something which is somehow contradicting with the <ul> tag and hence it is aligning the text to the center?
This is possibly the case. Inspect the styles applied to the <ul> using a html/css inspector.
The <ul> tag adds left margin, in the table cell.
The ul tag automatically adds 40px of left padding. Setting the padding to 0 should fix your problem.