I'm working with a content management system that doesn't allow me to alter the head of the pages I'm working with. The page I'm creating will be edited by others using a WYSIWYG editor and will include a table where users can upload new documents. I want to style this with CSS so that I can give one command to put a line between each row (and this won't need to be done every time by each user - since they likely won't know how), but every time I do this it doesn't show anything. My code attempt is below, is this possible?
<table width=600px cellSpacing=2 cellPadding=2 style="td {border-bottom: solid 1px black;" }">
Not that I'm aware of. But you can do this
<style type="text/css">
.specialtable td {
border-bottom: 1px solid black;
}
</style>
<table width=600px cellSpacing=2 cellPadding=2 class="specialtable">
...
</table>
This will ensure that only this specific table's <td/> elements will be styled according to your needs. Note: according to the w3c specs, <style/> is only allowed within the <head/> element of your document. But in many browsers, it still works if you put it anywhere in the <body/>. Since you're looking for a kind of hack, this may be a viable solution for you
You can use frame and rules, two lesser-known attributes of the table element.
<table cellpadding="3" cellspacing="0" frame="below" rules="rows">
<tr><td>one</td><td>two</td></tr>
<tr><td>three</td><td>four</td></tr>
<tr><td>five</td><td>six</td></tr>
</table>
See jsFiddle.
Or if you only want lines in between the rows and not below the bottom one, leave out frame="below".
This won't work in all browsers though.
Related
I know there are many such posts, but none of the solutions works for me. I am using wordpress.com, which is extremely poor and has lots of flaws in general. So I just wonder if that is just one more "constraint" which wasn't mentioned along with the billing.
I have a simple HTML code, which works perfectly well in http://www.w3schools.com interpreter. It doesn't work when using wordpress.com.
<table border="0">
<tbody>
<tr>
<td align="center" width="90%">A</td>
<td align="center">B</td>
</tr>
</tbody>
</table>
I have tried border-collapse property as well. How to remove table borsers, or how to work around this problem?
I found the tip which works. This is wordpress.com specific issue. Solution is given here. It has to be stated
<table style="border:none;">
and in each cell
<td style="border:none;">
Have you tried this?
<table style="border: none; border-collapse: collapse;" border="0">
You can also check your styles.css and see if there are specific styles for your table.
If you want to target a specific table then just use an ID or a class instead.
.table, .td, th {
border: 0;
}
If still not working add border: 0 !important; and make sure that the css is rendered on your views by checking via inspect element...
I'm going though something quite weird. I was working on a chat system with the rows and stuff based on tables, but the formatting kept messing up. I wondered why until I looked at the part of the source which was not working, which looked like this:
<table border="0">
<tbody>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td>
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td>
</tr>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td>
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td>
</tr>
</tbody>
</table>
However, when I view it through dev tools in chrome, I get this:
<table border="0">
<tbody>
<span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
<span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
</tbody>
</table>
Any idea why this is happening? The td's and tr's are automatically removed from the document when they are rendered. And this is not chrome specific. Live code in dreamweaver gives the same puzzling result.
Pic below:
I tested this in jsfiddle and it doesn't seem to be a problem. I also tested it in my own environment (chrome) and it works fine. Try looking for an unclosed tag in code above the table.
Edit:
Paste the code into w3c validator http://validator.w3.org/check. I found 13 errors/warning in the html. Check out the errors and the specific line numbers.
I found that you have div tags within the table, but they are not wrapped by a tr. I'm sure you'll be able to find the rest within the validators output.
According to your jsfiddle: you have simple mistake in HTML structure, here is copy paste;
</tr>
</table>
</div>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
you close table and then you do not open it. ctrl + f and type /table. I suggest you just going carefully through it and make valid html ;)
Sorry it is not an answer, but it won't let me comment.
I tried same code in chrome using Dev Tools it is showing me tr and td's, so I am not what is happening in your case. I enclosed above code into html and body tags.
Really annoying situation, and maybe there is an easier solution.. but I basically have a simple table I have styled in the general format:
<style type="text/css">
table.master_table {
... global table styling
}
.master_table td {
... master table td styling
}
.master_table td.dv {
... td dv style
}
.. more styling
</style>
<table class="master_table">
<tbody>
<tr>
<td class="dv">
.. nothing special
</tr>
</tbody>
</table>
Now the problem is the server doesn't support the "style" element so I need to manually apply the style to each level i.e.:
<table style="... global table styling">
<tbody>
<tr>
<td style="td styling;td dv style">
.. nothing special
</tr>
</tbody>
</table>
Is there any programs that can do this? Or is there any easier way to do this? I basically have a Wordpress.com blog that looks beautiful, in Live Writer because of some custom styling but as soon as I post, it strips out the style block. As a test I went through an manually did some of the above and it works, its just insanely painful and error prone.
if you are on wordpress.com i do not think you can control the css or anyother file.
you have to host your own wordpress.org blog to customize your theme.
So I found an online solution called "emogrifier"
Works well, all you have to do is enter css, then enter html and it will output inline styles.
There is a plugin called Art Direction which lets you add custom css on a per post basis. If you use this style on several different pages you should add the styles to a global stylesheet.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
HTML table with fixed headers?
I've tried several methods to get a scroll bar from an HTML table with a fixed header but had no luck. I think I need a solution where the header is somehow "attached" to the table body (rather than the typical nested table solution). Every solution I tried messes up the width of the header columns and the body columns. In other words they get out of synch and the columns of the header don't line up properly with those of the scrolling table. The widths of the headers and the columns vary from column to column.
Is there any way for me to achieve this? I'd rather not use JavaScript. Oh and I need this to work in Internet Explorer as well.
Update: It is pretty important for me to get this functionality. I need the fixed header for both column and row headers. So far no solution has worked properly. I considered making the headers separate tables, but this wouldn't work when scrolling since the headers would stay fixed.
It seems like there would be many use cases for fixed HTML headers so it is surprising to me that there is no adequate solution.
(Oh, and I tried the option suggested by opatut in the link, but it doesn't work in all browsers and I need this work in Internet Explorer, Firefox and Chrome. If it doesn't work in Internet Explorer 6 that's OK).
Oh, and if I must fix the column widths or row heights, that's OK too, I would just be glad to have a working fixed header HTML table (cross-browser).
I have a solution which is a pure CSS solution and allows the table to be normal and variable width. This is a new solution and has some issues depending on the design of your headers. The good news is that if your headers are left-aligned, or your columns are fixed width, it should be fine. There are some visual bugs in IE6, and I've found that some cells need a min-width to keep the headers showing if the content in the column is less wide then the header. All the issues are visual, so if it looks good you're done. The table body is totally normal, and since there's no JavaScript you don't have to do anything if the user re-sizes the page.
Check out my solution and leave me a comment
http://salzerdesign.com/blog/?p=191
I know you're trying to avoid Javascript, but I was in exactly the same boat as you (struggling with what to do for days on the exact challenge for a new application) and solved the problem in about 10 minutes once I found Datatables:
Working example of a solution: http://www.datatables.net/examples/basic_init/scroll_y.html
It EXACTLY matches header and body columns width-wise every time. Widths can be specified, but it's also intelligent enough to auto size. Column highlighting and sorting is supported by default using the provided sample CSS. Switching to a paginated model (what I ended up using) is a single line of code. And....the best part--if you're concerned that your user might not have Javascript turned on, it degrades perfectly back to standards-compliant HTML tables. IMHO, it's the least painful, most feature rich solution out there that fully supports IE.
If it makes you feel any better, I've used this solution on both a government (military) site and an international bank's websites....both the most demanding and strictest customers I've ever come across...and both were extremely happy with the results.
My first answer didn't attempt to fix both headers and columns. Here's an example that should work in all typical browsers (but it may need some tweaking).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style>
th { text-align: center; border: 1px solid black; padding:3px; }
td { text-align: center; border: 1px solid black; padding:3px; }
th.c1, td.c1 { width: 100px; }
th.c2, td.c2 { width: 150px; }
th.c3, td.c3 { width: 60px; }
th.c4, td.c4 { width: 100px; }
th.c5, td.c5 { width: 150px; }
th.c6, td.c6 { width: 60px; }
#rowScroll { height: 100px; } /* Subtract the scrollbar height */
#contentScroll { height: 100px; width: 300px; }
#colScroll { width: 272px; } /* Subtract the scrollbar width */
</style>
<table cellspacing="0" cellpadding="0" style="float: left;" style="width:300px; height:100px;" >
<tr>
<td id="void" style="border: 0;">
</td>
<td id="rowHeaders" style="border: 0;">
<div id="colScroll" style="overflow-x:hidden;">
<table cellspacing="0" cellpadding="0" style="width: 600px;">
<tr>
<th class="c1">A</th>
<th class="c2">B</th>
<th class="c3">C</th>
<th class="c4">D</th>
<th class="c5">E</th>
<th class="c6">F</th>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td id="colHeaders" style="border: 0;">
<div id="rowScroll" style="overflow-y:hidden">
<table cellspacing="0" cellpadding="0">
<tr><td>R1</td></tr>
<tr><td>R2</td></tr>
<tr><td>R3</td></tr>
<tr><td>R4</td></tr>
<tr><td>R5</td></tr>
<tr><td>R6</td></tr>
<tr><td>R7</td></tr>
<tr><td>R8</td></tr>
<tr><td>R9</td></tr>
</table>
</div>
</td>
<td id="content" style="border: 0;">
<div id="contentScroll" style="overflow:auto">
<table cellspacing="0" cellpadding="0" style="width: 600px;">
<tr><td class="c1">A1</td><td class="c2">B1</td><td class="c3">C1</td><td class="c4">D1</td><td class="c5">E1</td><td class="c6">F1</td></tr>
<tr><td class="c1">A2</td><td class="c2">B2</td><td class="c3">C2</td><td class="c4">D2</td><td class="c5">E2</td><td class="c6">F2</td></tr>
<tr><td class="c1">A3</td><td class="c2">B3</td><td class="c3">C3</td><td class="c4">D3</td><td class="c5">E3</td><td class="c6">F3</td></tr>
<tr><td class="c1">A4</td><td class="c2">B4</td><td class="c3">C4</td><td class="c4">D4</td><td class="c5">E4</td><td class="c6">F4</td></tr>
<tr><td class="c1">A5</td><td class="c2">B5</td><td class="c3">C5</td><td class="c4">D5</td><td class="c5">E5</td><td class="c6">F5</td></tr>
<tr><td class="c1">A6</td><td class="c2">B6</td><td class="c3">C6</td><td class="c4">D6</td><td class="c5">E6</td><td class="c6">F6</td></tr>
<tr><td class="c1">A7</td><td class="c2">B7</td><td class="c3">C7</td><td class="c4">D7</td><td class="c5">E7</td><td class="c6">F7</td></tr>
<tr><td class="c1">A8</td><td class="c2">B8</td><td class="c3">C8</td><td class="c4">D8</td><td class="c5">E8</td><td class="c6">F8</td></tr>
<tr><td class="c1">A9</td><td class="c2">B9</td><td class="c3">C9</td><td class="c4">D9</td><td class="c5">E9</td><td class="c6">F9</td></tr>
</table>
</div>
</td>
</tr>
</table>
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var content = $("#contentScroll");
var headers = $("#colScroll");
var rows = $("#rowScroll");
content.scroll(function () {
headers.scrollLeft(content.scrollLeft());
rows.scrollTop(content.scrollTop());
});
</script>
</body>
</html>
Try my solution, it's bug free and optimized for performance (not sacrificing functionality):
http://code.google.com/p/js-scroll-table-header/
If you try it and need any help, just ask, I'm the author.
It's a bit too much code to put in here directly, but what it comes down to is, at minimum, you'll need some hefty CSS for this. Using javascript and jQuery can lighten that, so I'll include links to both methods.
HTML + CSS Only
You can use the source on this page to copy an example of how you can do exactly what you're asking via CSS and HTML. This is reported as working in pretty much all current browsers (Opera 7.x + (All Platforms), Mozilla 1.x + (All Platforms), IE 6.x + (Windows), Safari 1.x + (MacOS), Konqueror 3.x + (Linux / BSD)), but if you have to go back to IE 5.x, it starts to fail.
Javascript/jQuery
If you decide that you're open to including Javascript and jQuery, there's a second option that looks a bit simpler to implement: this blog article shows how.
All I've found need fixed values for cell width and height, so if you want to keep it dynamic you're stuck with JavaScript.
One solution I like is this one, but you need to define a width for each colum. » Fixed headers in large HTML tables at The Code Project.
If you don't want to use JavaScript, maybe you can set the fixed column widths with PHP. I would determine the average string length of the cells to get the column width:
column_width = column_average / (all_cells_average * column_count) * table_width
You can use DataTables without JavaScript. It won't have sorting but the table, headers and divs that are hosting them will work. Just look at the page source - it has 3 divs each with a table with identical widths in thead. Top and bottom just provide header and footer and the one in the middle provides data. It's actually pretty close to your original idea that you need to heep these parts separated.
I have a table as follow:
<table>
<tr>
<td>
*PROBLEMATIC CELL*
</td>
<td rowspan="2">
</td>
<td rowspan="3">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
The first cell of the first row, has a padding at the bottom. Well it's not really padding but it looks like padding and using firebug I can not find what the space there actually is.
I think what is happening is that, firefox automatically adjusts the bottom padding of the first td in the first tr with the padding top of the first and only td of the second tr.
p.s. works perfectly fine in Chrome.
Basically what I am trying to achieve is for the height of the first td in the first tr, to be only as tall as required but not taller so that the content of that cell ends on the same place as where the td ends without any space between them.
The website URL is: http://mmamail.com/
It seems to have something to do with the padding-top placed on the first TD of the SECOND TR. The weird thing is that it works nicely on chrome.
You've presented the browser with an incomplete layout problem. You have a three-by-three grid, none of whose columns or rows have fixed sizes. So the issue is you end up with a taller first row than you intended, as the browser tries to allocate ‘spare’ height caused by the rowspan in the second column amongst the cells in the first column.
There isn't a standardised algorithm for this; browsers do different things, often including unpleasant things like looking at the raw number of bytes of markup in each cell. You don't want to rely on this behaviour. It also slows page rendering down and can give really weird, page-distorting effects when there's a very small or large amount of content. If you need to use tables for layout, make sure to use table-layout: fixed with explicit widths for the fixed-size columns, and set explicit heights for cells when there are rowspans, to avoid ambiguity.
But a proliferation of rowspan/colspan is often a hint you should be looking at a different form of layout. This example is very much easier to acheive using CSS instead. eg.:
<div id="ads">
<script type="text/javascript">//...google stuff...</script>
...
</div>
<div id="content">
<div id="video"><fieldset>
<legend>...</legend>
<object ...>
</fieldset></div>
<form id="poll" method="post" action="..."><fieldset>
<legend>...</legend>
...options...
</fieldset></form>
<form id="subscribe" method="post" action="..."><fieldset>
<legend>...</legend>
...fields...
</fieldset></form>
<div id="about">
...
</div>
</div>
with styles something like:
#ads { position: absolute; right: 0; width: 160px; }
#content { margin-right: 160px; }
#video { float: right; width: 440px; }
#poll, #subscribe { margin: 0 440px 0 0; }
#about { clear: right; }
I'd also advise you to move the JavaScript logic out from the inline event handler attributes you currently have to separate JavaScript blocks (either embedded <script> blocks or linked external scripts). Especially for the multi-line event handlers: quite apart from the horrible maintainability of mixing scripts into markup, in HTML/XML newlines in attributes are not preserved. That means your newlines in JS code are converted into spaces, so if you miss a single semicolon your script will break or behave oddly (where usually in a script block or external script, the auto-newline-semicolon-fallback would save you).
ie.
onsubmit="
var inputs = this.getElementsByTagName('input');
var checkedValue;
for(var i = 0; i < inputs.length; i++)
{
if(inputs[i].getAttribute('type') == 'radio' && inputs[i].checked)
{
checkedValue = inputs[i].value;
}
}
/*makeAjaxPostRequest('/poll/ajax-vote.php', 'vote='+checkedValue, processAjaxResponse);*/
makeAjaxGetRequest('/poll/ajax-vote.php?vote='+checkedValue, processAjaxResponse);
return false;"
instead:
<form id="pollForm" method="post" action="/poll/form-vote.php>
...
</form>
<script type="text/javascript">
document.getElementById('pollForm').onsubmit= function() {
var checkedValue= getRadioValue(this.elements.vote);
makeAjaxPostRequest('/poll/ajax-vote.php', 'vote='+encodeURIComponent(checkedValue), processAjaxResponse);
return false;
};
function getRadioValue(fields) {
for (var i= fields.length; i-->0;)
if (fields[i].checked)
return fields.value;
return '';
};
</script>
Always allow only POST requests for active forms that do something positive. Always use encodeURIComponent when creating query strings. Don't use getAttribute as it doesn't work right in IE; use direct DOM Level 1 HTML properties instead, eg. input.type.
if you are referring to the space in between the "Monthly poll" and "Monthly Magazine" boxes, it is not caused by padding...
What's happening is the td containing the flash video is too tall, and because it has a rowspan of 2, the two tds on the left are being adjusted to the height of the tallest td (aka the video box)
One solution is to add another tr below the first 2 rows,
let it have an empty td,
change the rowspan of the video box to 3
And then the redundant space you see in between the first 2 boxes will be transfered to the empty td you have just created.
OR
I would suggest you bite the bullet and start using CSS rather than tables for layout, purely because:
We are in the second decade of the 21st century
It is much more flexible to use CSS
It will be much easier for you change the look of the site in th future, without touching the markup.
It will be much better for search engines to index your site content
Assistive software such as screen readers can see your content in the order they are supposed to be seen
You will be one happy developer in the end
Controlling table cell padding with css can be tricky. Try adding these two css rules:
table { border-spacing: 0; }
table td { padding: 0; }
Unfortunately, the border-spacing rule isn't supported by all browser, so you may have to add cellpadding="0" and cellspacing="0" as an attribute to the table.
I've tried with the follow HTML code which is merely a more complete version of your code fragment. However, I'm seeing no padding as you have described. So my best guess is that it's caused by some other CSS rules you defined elsewhere.
<!doctype html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
*PROBLEMATIC CELL*
</td>
<td rowspan="2">
</td>
<td rowspan="3">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</body>
</html>