<html>
<head>
<style>
table,td {border:1px solid black ;}
table {width : 80% ;height:80%;}
.top {vertical-align:top};
.center {vertical-align: middle};
.bottom {vertical-align: bottom};
</style>
</head>
<body>
<table>
<tbody>
<tr><td class = "top">1</td><td class = "top" "left">2</td><td class = "top" "left">3</td></tr>
<tr><td class = "center" >4</td><td class = "center">5</td><td class = "center">6</td></tr>
<tr><td class = "bottom">7</td><td class = "bottom">8</td><td class = "bottom">9</td></tr>
</tbody>
</table>
</body>
</html>
Line number 8 ie .bottom {vertical-align: bottom}; is working perfectly fine in internet explorer 8 but it does not work on google chrome even though i have the latest version.
I think you had a simple syntax issue, the semi-colons should be inside the closing bracket.
See your code below.
Also, add height: 100% to body and html to set the reference for the table-cell heights.
Note: As noted in one of the posted comments, you did not define a CSS style for left, so it was not clear what you intended. By itself, left is not a valid attribute.
body,
html {
height: 100%;
}
table,
td {
border: 1px solid black;
}
table {
width: 80%;
height: 80%;
}
.top {
vertical-align: top;
}
.center {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}
<table>
<tbody>
<tr>
<td class="top">1</td>
<td class="top">2</td>
<td class="top">3</td>
</tr>
<tr>
<td class="center">4</td>
<td class="center">5</td>
<td class="center">6</td>
</tr>
<tr>
<td class="bottom">7</td>
<td class="bottom">8</td>
<td class="bottom">9</td>
</tr>
</tbody>
</table>
Related
I am trying to find a way to make a cell transparent or semi-transparent. The below code should work but doesn't:
<html>
<style>
op {
opacity:0.3;
filter:alpha(opacity:30)
}
</style>
<body background="background.jpg" style="background: black;">
<table border="1" width="100%" height="222">
<tr>
<td class="op" bgcolor="#FFFFFF" height="216"> </td>
</tr>
</table>
</body></html>
You haven't properly defined the CSS class, class definition must begin with a dot, in your case .op.
Also, your are mixing CSS and HTML attributes, you should only only CSS (note that definitions for HTML tags don't start with a dot):
<html>
<style>
body {
background-image: background.jpg;
background-color: black; /* for testing without the image*/
}
table {
border: 1px;
width: 100%;
height: 222px;
}
td {
height: 216px;
}
.op {
opacity:0.3;
filter:alpha(opacity:30);
background-color: #FFFFFF;
}
</style>
<body>
<table>
<tr>
<td class="op"> </td>
</tr>
</table>
</body></html>
I'm a newbie regarding CSS and HTML, so apologies if this seems like a stupid question. But for the love of god, I can't seem to figure it out. I only get a horizontal scrollbar and not a vertical one.
In the code below I try to achieve that the last column, that contains the string 'aaaaaabbb...' becomes scrollable. So that when it's overfilled it starts a new line and shows a scrollbar. So I would like to see this for the last row:
Desired result:
aaaaaaaa
bbbbbbbc
cccccccc
HTML-code:
<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width:100px;
height:200px;
max-width:100px;
min-width:100px;
max-height:200px;
min-height:2000px;
overflow:scroll;
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>+N/A+</td></tr>
<tr><th>Source</th><td>#Event#</td></tr>
<tr><th>Category</th><td>&Request Fulfillment&</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td</tr>
</table>
</body></html>
Thank you for your help.
Two things:
You have a missing ">" at the end of your closing </td>.
You only have one column in that <tr> - is that intentional? (if not you should have colspan=2 in that <td>
The solution you are looking for is word-wrap: break-word; This will allow the content to wrap.
I have modified your snippet:
<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width:100px;
height:200px;
max-width:100px;
min-width:100px;
max-height:200px;
min-height:2000px;
overflow: auto; /* changed this */
word-wrap: break-word; /* added this */
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>+N/A+</td></tr>
<tr><th>Source</th><td>#Event#</td></tr>
<tr><th>Category</th><td>&Request Fulfillment&</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size" colspan=2>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td></tr>
</table>
</body></html>
Like others have mentioned, in order to get the long-one-word text to wrap - you need to add: word-wrap: break-word; to the td
However, achieving a vertical scroll on a table cell is problematic because by definition table cells expand to fit all the content.
You could work around this by setting display:block on that table cell. (like this)
But it's probably better to wrap the text within a span tag so as not to mess with the display of table elements:
Like so:
FIDDLE
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width: 100px;
height: 200px;
max-width: 100px;
min-width: 100px;
}
.td_size span {
overflow: auto;
display: block;
max-height: 200px;
word-wrap: break-word;
}
<h2>Ticket details</h2>
<table>
<tr>
<th>Requester</th>
<td>^User^</td>
</tr>
<tr>
<th>Submitted by</th>
<td>®User®</td>
</tr>
<tr>
<th>Service</th>
<td>#GLOBAL END USER WORKPLACE#</td>
</tr>
<tr>
<th>CI</th>
<td>+N/A+</td>
</tr>
<tr>
<th>Source</th>
<td>#Event#</td>
</tr>
<tr>
<th>Category</th>
<td>&Request Fulfillment&</td>
</tr>
<tr>
<th>Impact</th>
<td>!None - No Degradation of Service!</td>
</tr>
<tr>
<th colspan="2" style="text-align:Center">Assignment</th>
</tr>
<tr>
<th>Group</th>
<td>]Team]</td>
</tr>
<tr>
<th>Staff</th>
<td>[User[</td>
</tr>
<tr>
<th colspan="2" style="text-align:Center">Description</th>
</tr>
<tr>
<td class="td_size"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</span>
</td>
</tr>
</table>
First, make that last column span over 2, ie colspan=2 but as for the css part you can use overflow-x and overflow-y to determine the scrolling parts
Try it
you may use word-wrap: break-word; or <br> tag where you want to break the word
Here's a portion of my table (it's a form):
Those are just two <td>'s in a <tr>. I'm trying to get Description up top, to the top of the table cell, rather than resting on the bottom.
How can I do that?
td.description {vertical-align: top;}
where description is the class name of the td with that text in it
td.description {
vertical-align: top;
}
<td class="description">Description</td>
OR inline (yuk!)
<td style="vertical-align: top;">Description</td>
Try
td.description {
line-height: 15px
}
<td class="description">Description</td>
Set the line-height value to the desired value.
If you are using Bootstrap, please add the following customised style setting for your table:
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
vertical-align: middle;
}
valign="top" should do the work.
<tr>
<td valign="top">Description</td>
</tr>
I had the same issue but solved it by using !important. I forgot about the inheritance in CSS. Just a tip to check first.
Just add vertical-align:top for first td alone needed not for all td.
tr>td:first-child {
vertical-align: top;
}
<tr>
<td>Description</td>
<td>more text</td>
</tr>
CSS {vertical-align: top;} or html Attribute {valign="top"}
.table td,
.table th {
border: 1px solid #161b21;
text-align: left;
padding: 8px;
width: 250px;
height: 100px;
/* style for table */
}
.table-body-text {
vertical-align: top;
}
<table class="table">
<tr>
<th valign="top">Title 1</th>
<th valign="top">Title 2</th>
</tr>
<tr>
<td class="table-body-text">text</td>
<td class="table-body-text">text</td>
</tr>
</table>
For table vertical-align we have 2 options.
is to use css {vertical-align: top;}
another way is to user attribute "valign" and the property should be "top" {valign="top"}
I have a simple two column table; I want a way to align the data in the first column to the right and to be able to style the two elements separately. Perhaps a table is not the best solution here, but I don't know what else to try. I tried with column groups, but it isn't working. Even when I try applying text-align: right to the 'label' element.
<table>
<colgroup>
<col class="label" />
<col class="price" />
</colgroup>
<tr>
<td><label>Subtotal:</label></td>
<td>$135.00</td>
</tr>
<tr>
<td><label>Taxes:</label></td>
<td>$11.23</td>
</tr>
</table>
Since you're probably talking about heading cells, I'd go for a different approach:
<style type="text/css">
table th { text-align: right; }
table td { text-align: left; }
</style>
<table>
<tr>
<th>Right aligned</th>
<td>Left aligned</td>
</tr>
</table>
Give id or class to your HTML tags. eg ..
Then use css to style them as you want.
tr#cell1{
text-align:right;
}
Use this for every row yoou want to align seperately
Label doesn't right align because it is an inline-element. If you give it display:block or display:inline-block it will fill the whole table cell and apply your right align:
label {
display: block;
text-align: right;
}
Try to give the table cell a class
<td class="sub">…</td>
and then style them with CSS:
table td {
// style for all except .sub
}
table td.sub {
text-align: right;
// and other styles that differ from rest
}
This should do!
<html>
<head>
<style>
.one { width:100px; border:1px solid red; }
.one label { display:block; width:100%; text-align:right; }
.two { width:150px; border:1px solid green; }
</style>
</head>
<body>
<table>
<tr>
<td class="one"><label>one</label></td>
<td class="two">two</td>
</tr>
</table>
</body>
</html>
If you don't want to turn the td element into th you can do this:
<style type="text/css">
table td:first-child { text-align: right; }
</style>
<table>
<tr>
<td>Right aligned</td>
<td>Left aligned</td>
</tr>
</table>
It works well with Firefox, Chrome and IE 8 (probably IE 7 too).
I have the following code:
<!DOCTYPE html>
<html>
<head>
<style>
.tl, .tr, .bl, .br, .b, .t {
background: #f00;
width: 16px;
height: 16px;
}
.m {
background: url('https://www.google.com/images/logos/ssl_logo_lg.gif') #0f0;
}
table {
width: 512px;
height: 512px;
border-spacing: 0px;
border-collapse: collapse;
table-layout: fixed;
}
</style>
</head>
<body>
<table>
<tr>
<td class="tl"> </td>
<td class="t"> </td>
<td class="tr"> </td>
</tr>
<tr>
<td> </td>
<td class="m">test</td>
<td> </td>
</tr>
<tr>
<td class="bl"> </td>
<td class="b"> </td>
<td class="br"> </td>
</tr>
</table>
</body>
</html>
It works fine as long as I don't look at it with IE7. IE7 for some reason does not respect my width and height set to 16px and instead makes all rows and columns to take the average size. Oddly, this works in the Quirks mode though, but now in the standards mode, what's up?
P.S. Is there any other way of accomplishing a similar layout that has 16x16 corners, 16px top and bottom while the middle fits in?
give height:100%; for .m
Try giving each cell some content:
<td class="tl"> </td>
that should fix it.
border-spacing and border-collapse are not supported in IE7 and below. Try using
<table cellspacing="0" cellpadding="0">
Update:
I don't have IE7 nor IE6 here, so this is just a guess: try setting the width and height of .m to auto. If that doesn't work (since that would be too easy, right? :)), you can set the dimensions manually to 480px (512 - 2 * 16)
Try this:
<style>
table {
width: 512px;
border-spacing: 0px;
border-collapse: collapse;
table-layout: fixed;
}
table .m
{
background: url('https://www.google.com/images/logos/ssl_logo_lg.gif') #0f0;
height: 512px;
}
.tl, .tr, .bl, .br, .b, .t {
background: #f00;
width: 16px;
height: 16px;
}
</style>