<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
table {border: 1px solid black; width: 500px}
.title {height: 40px}
.close {float: right}
td {text-align: center; border: 1px solid black}
</style>
</head>
<body>
<table>
<tr>
<td class="title"> Centered <span class="close">XXXXX</span> </td>
</tr>
<tr>
<td>content</td>
</tr>
<tr>
<td>content</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</body>
</html>
In this example, the "XXXX" is indeed placed to the right, but this causes the "Centered" text to be offset slightly to the left. This is because the "XXXX" is still taking up space in the document flow next to the text "Centered". How can I have it so "Centered" is centered exactly like the rest of the table?
heres and example rendering:
rendering http://img43.imageshack.us/img43/9659/screenshoteoo.png
If you absolutely position the span.close, it won't take up space and your title should be perfectly centered:
tr td {
position: relative;
}
tr td span.close {
position: absolute;
top: 0;
right: 0;
}
Edit Whoops - never encountered that before. Normally a parent with position: relative will act as the coordinate system for a child with position: absolute, but not in the case of a <td>. If you wrap your title and span.close in a <div> with the following code you should be in business:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 strict.dtd">
<html>
<head>
<style>
table {border: 1px solid black; width: 500px}
.title div {
position: relative;
height: 40px;
}
td {text-align: center; border: 1px solid black}
td span.close {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<table>
<tr>
<td class="title">
<div>Centered <span class="close">XXXXX</span></div>
</td>
</tr>
<tr>
<td>content</td>
</tr>
<tr>
<td>content</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</body>
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>
<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>
Sorry if this is a plainly obvious answer, I am a horrible web designer.
I am making a help page for my program, and I'm using a table to show the hotkeys. I used CSS to center it and remove the border.
The header of the table is Action, and Trigger, but they do not show up when I open the HTML with my broswer, only the table data. To the point, why does this happen and how can it be fixed?
A fiddle: http://jsfiddle.net/CaffeineToCode/rq9hc7hL/1/
<!DOCTYPE html>
<html>
<head>
<title>Help</title>
</head>
<style>
body {
background: -webkit-linear-gradient(left, #F99200, #FDE000);
background: -o-linear-gradient(left, #F99200, #FDE000);
background: -moz-linear-gradient(left, #F99200, #FDE000);
background: linear-gradient(to right, #F99200, #FDE000);
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
table, td, th {
border: none;
}
td {
padding: 10%;
}
</style>
<body>
<div class="center">
<table>
<tr>
<th>Action</th> <!-- No header??? -->
<th>Trigger</th>
</tr>
<tr>
<td>Fullscreen</td>
<td>"f11" key</td>
</tr>
<tr>
<td>Turn page forward</td>
<td>"→" key or right page curl</td>
</tr>
<tr>
<td>Turn page backward</td>
<td>"←" key or left page curl</td>
</tr>
<tr>
<td>Set bookmark</td>
<td>Bookmark icon, <i>CTRL + B</i>, or Menu > Set bookmark</td>
</tr>
<tr>
<td>Go to bookmark</td>
<td>Menu > Go to bookmark</td>
</tr>
<tr>
<td>Go to page</td>
<td>Menu > Go to page</td>
</tr>
<tr>
<td>Go to page</td>
<td>Menu > Go to page</td>
</tr>
<tr>
<td>Go to book</td>
<td>Menu > Go to book</td>
</tr>
<tr>
<td>Go to verse</td>
<td>Menu > Go to book, then type "<book> <verse>"</td>
</tr>
</table>
</div>
</body>
</html>
Add: height:100%; to .center div.
http://jsfiddle.net/rq9hc7hL/5/
Also, as mentioned in answer above - no need for absolute positioning....
Change your .center class to this:
.center {
margin: auto;
width: 50%;
}
There is no need for absolute position. If you want it to be centered, juste use margin: auto;
Working Fiddle
You can resolve this thing by changing 3 style properties in .center as follow:
transform: translate(-50 %, -15%);
or
top: 150%;
or
height : 100%
You need to remove this CSS rule: td {padding: 10%;}
How can I?
Given the html coding below, how can I 1.) Lock the first row (table headers) from scrolling and 2.) Have an inner table border of 1px solid #cccccc
Thanks for all your help!
Jay
Style Coding:
<style type="text/css">
div#data_container {
width: 800px;
height: 75px;
overflow: auto;
border: 1px solid #cccccc;
}
table#data_tbl {
border-collapse: collapse;
table-layout: fixed;
}
table#data_tbl td {
border: 0px;
}
table#data_tbl tr:first-child td {
color: #235A81;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
}
</style>
Body:
<!-- START OF DATA CONTAINER -->
<div id="data_container">
<table id="data_tbl">
<td>File Number</td>
<td>Date Received</td>
<td>Request Type</td>
<td>Name</td>
<tr>
<td>12345678</td>
<td>08/01/2013</td>
<td>Billing</td>
<td>Joe Smith</td>
</tr>
<tr>
<td>09876543</td>
<td>09/01/2013</td>
<td>Technical</td>
<td>Nancy Edwards</td>
</tr>
<tr>
<td>11223344</td>
<td>10/01/2013</td>
<td>Operations</td>
<td>Jill White</td>
</tr>
<tr>
<td>45678931</td>
<td>12/01/2013</td>
<td>Billing</td>
<td>Michael Burns</td>
</tr>
<tr>
<td>85239975</td>
<td>09/01/2013</td>
<td>Support</td>
<td>Debbie Stewart</td>
</tr>
<tr>
<td>55667788</td>
<td>11/01/2013</td>
<td>Administrative</td>
<td>David Adams</td>
</tr>
</table>
</div>
<!-- END OF DATA CONTAINER -->
Easiest way is to use 3rd party plugin. check this out: http://dlippman.imathas.com/projects/tablescroller.php or try datatables.net
Style table for borders:
table {
position: relative;
}
table, th, td {
border: 1px solid #cccccc;
}
You can set style="overflow:hidden" on th tag when box appears. It will lock mouse scroll or use position:fixed on a box.
Is there a way Firefox keeps the row height, so if data doesn't fill all the body heigth it keeps an empty space below last row? IE behaves this way, so all rows stay on the top.
I want to code a scroll table with fixed header; sometimes there's not sufficient data on table content to fill the fixed table height.
A sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="reset.css"/>
<style type="text/css">
* {margin:0}
table {
border: solid #66CC99;
border-width: 0px 1px 1px 0px;
width: 400px;
}
th, td {
border: solid #66CC99;
border-width: 1px 0px 0px 1px;
padding: 4px;
}
th {
background-color: #339999;
color: #FFFFFF;
}
tr.alt td {
background-color: #EEEEEE;
}
tbody {
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
</style>
<!--[if IE]>
<style type="text/css">
div {
position: relative;
height: 200px;
width: 416px;
overflow-y: scroll;
overflow-x: hidden;
border: solid #66CC99;
border-width: 0px 0px 1px 0px;
}
table {
border-width: 1px 1px 0px 0px;
}
thead tr {
position: absolute;
top: expression(this.offsetParent.scrollTop);
}
tbody {
height: auto;
}
table tbody tr:first-child td {
padding: 29px 4px 4px 4px;
}
</style>
<![endif]-->
</head><body>
<table class="treeTable" id="table" cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th id="col1" class="text" style="width: 100%;" nowrap="nowrap">NAME</th>
<th class="selectable" style="width: 14em;" id="th-122002" nowrap="nowrap">12/2002</th>
<th class="selectable" style="width: 14em;" id="th-122007" nowrap="nowrap">12/2007</th>
<th class="selectable" style="width: 14em;" id="th-072010" nowrap="nowrap">07/2010</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
Name
</td>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
</tbody>
</table>
</body></html>
One solution that works to a certain extent but doesn't seem perfect is to add this as the last row:
<tr style="height: 100%;"></tr>
It seems to create an empty row that is the size of the area meaning that you can scroll off the bottom til there is only white space which probably isn't ideal. You might be able to play with this a bit (possibly do some rough calculations to work out a sensible height based on how many rows you have) to get a working solution.
Did you specify the height attribute, set it to desired value and then see.
Can you possibly paste your code? I'd also recommend using a reset.css to remove any prejudice different browsers have interpreting your code.
You can set ' ' as a data if there is no value or you can do is set style attribute to your 'td' tag as <td style="height: 15px;"> </td>