The following IPython notebook cell results in a table with a gray background and borders:
from IPython.display import HTML
s="""
<style type="text/css">
table, td {
border-collapse: collapse;
border-style: hidden;
background-color: rgb(240,240,240);
}
</style>
<table>
<tr>
<td>a
<td>b
<tr>
<td>c
<td>d
</table>
"""
h = HTML(s); h
but when the same html content (the content of string s) is the entire body of a plain html file, the table has a gray background and no border (as intended). It appears that the border properties don't work correctly in IPython notebook. Any ideas?
Another puzzle: adding a colgroup to the table and a col to the css selector causes everything but the horizontal rule between rows to disappear in IPython notebook.
This will remove border from the whole table:
create and run a code cell above the table markdown cell, with the following content:
%%html
<style>
table,td,tr,th {border:none!important}
</style>
When a <style> element without the (HTML5) scoped attribute appears in the <body> of an html document, the behavior of the agent is unspecified.
Browsers like Firefox and Opera try to do something anyway, but we can't be sure of the way inheritance, cascading and specificity are accounted for in this fuzzy context.
You have two easy (local) solutions:
add the scoped attribute (works well in Firefox, not so well in Opera, don't know about IE)
<style type="text/css"> --> <style type="text/css" scoped>
The scoped attribute is subject to hot debate, see these for example: On the abominable proposed html5 scoped attribute and Saving the day with scoped CSS.
and of course, add an inline style to your <table> element
Other, more global solutions aren't so good, in my opinion, but it depends on what you want to achieve.
alternatively you can use inline css
<table style="border-style:hidden;border-collapse:collapse;">
Related
I have a table where I want to force page breaks before certain TR's when printing, so I searched around and found Applying "page-break-before" to a table row (tr), seemed simple enough: set display to block and use page-break-before as usual. However, it doesn't seem to be working (at least not in Chrome 59, Windows). For example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
tr.break-here {
display: block;
page-break-before: always;
}
</style>
</head>
<body>
<table>
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
</table>
</body>
</html>
When printed, all three of those sections are on the same page, but it should be three separate pages.
There was a suggestion there to use a pseudo-element, which I tried to no avail. There was also a suggestion to ensure the TR's TD contained a block-level element, so I tried putting empty div's in the relevant cells in that example, also with no change.
There is also How to apply CSS page-break to print a table with lots of rows?, where I've tried:
This answer: No effect:
tr.break-here { display:block; page-break-after:always; }
tr.break-here { page-break-after:always; }
What am I doing wrong here? How do I do this? I'm also a little confused because the answer on the linked question seems well received with no issues noted in comments. Splitting the table into three tables is not an option, as I need column widths (which are auto-fit to complex content) to be identical on all pages.
I found a solution based on this answer and some experimentation, I have no idea why it works:
<tr>
<td>
<div></div>
<div style="page-break-before:always"></div>
All of the following are important:
No page break styling on the tr.
The cell must contain at least two divs.
Any div except the first must be page-break-before:always.
If the cell only contains one div it doesn't work. Unlike in that answer, clear:both does not seem to matter, nor does the third div.
I was unable to find a working solution that did not involve adding divs to the tr (e.g. with pseudo-elements).
So this is what I'm doing for now, although I wouldn't mind somebody explaining what's going on here or, more importantly, why the solution in the original linked question (display:block; page-break-before:always; on the tr) did not work for me.
I'm working with AEM CMS and the user can build a table in a rich text editor. It works pretty well. Our implementation also uses bootstrap 3.1. Bootstrap sets td and th padding to 0. This takes precedence over the cellpadding set by the system based on the user's settings for the table compoonent. The generated HTML looks like this. The users' setting for cell padding was set to 4 in this example...
<div class="parbase table">
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tbody>
<tr><td>Hello 1</td>
<td>Hello2</td>
<td>Hello3 </td>
</tr>
<tr>
<td>lsdvn dfijkn jsdvoi m orijojnl JDFIUJ</td>
<td>adfbsk ik</td>
<td>lsdvn dfijkn jsdvoi m orijojnl JDFIUJ</td>
</tr>
</tbody>
</table>
</div>
Using Chrome Inspect Element I can see the Bootstrap rule is applied. When I uncheck this rule the table cellpadding takes effect, and the td's look good.
td, th {
padding: 0;
}
I've tried to remove the rule using initial and unset, but neither worked.
td, th {
padding: initial; /* and unset */
}
I'm hoping there's a css solution that doesn't involved changing the implementation of the component code generating the table html. Also, since we use a CDN for the bootstrap css/js, I don't want to customize the framework either.
Hopefully there's a CSS solution such that the bootstrap td and th padding rule can be unset/removed/deleted/etc.
You could try adding a more specific rule, which if I'm not mistaken will take priority over any less specific rule:
div.parbase td {
padding: 4px;
}
If this works, you can take out the cellpadding property of the table.
I suggest using jQuery cssText function:
$("td, th").css("cssText", "padding: 0 !important;");
This will override the rule after it.
I'm using an absolutely positioned element in a table header cell. To do this, the TH has to be positioned itself, to make it the child element's offsetParent (in my case, using position:relative). Unfortunately, it appears that current Firefox versions will issue a warning any time a TD or TR is given a position other than static.
With the following minimal table HTML
<table>
<tr><th>head</th></tr>
<tr><td>cell</td></tr>
</table>
and the following minimal CSS rules
th { position: relative } // either of these is enough
td { position: relative } // to trigger the warning
table { border-collapse: collapse }
this warning appears in the console for Firefox 30 and 32:
Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature
having no effect.
(the warning does not appear when the table borders are kept separate)
The source of this message is Firefox's table layout code:
/* static */ void
nsTableFrame::RegisterPositionedTablePart(nsIFrame* aFrame)
{
// Supporting relative positioning for table parts other than table cells has
// the potential to break sites that apply 'position: relative' to those
// parts, expecting nothing to happen. We warn at the console to make tracking
// down the issue easy.
So it seems we get this warning even if we're doing nothing wrong at all, because other sites may rely on the position rule doing "nothing". Is there a way to get rid of this annoying warning? It's basically telling me: Warning, what you're doing actually works!
I was getting the same warning and resolved it by applying positioning to a div inside the th or td rather than directly to the td or th. Not sure why it cares but now I don't need to see it anymore.
td div{position:relative;}
<table>
<tr>
<td>
<div></div>
</td>
</tr>
</table>
Have you tried this?
<table>
<tr><th><span class="pos1">head</span></th></tr>
<tr><td><span class="pos2">cell</span></td></tr>
</table>
css:
.pos1{
position:absolute;
top:25px /* example*/
}
.pos2{
position:absolute;
top:10px /* example*/
}
Here, I am facing another problem with CSS.
My HTML string is coming from database and adding to DOM with HTML Object.
new HTML(result.getResponseObject().getStringResult());
That string contains some HTML tables and have border="1", that has been overridden by default CSS (you can see that in Firebug), where as the border applied in HTML like border="1"
How to tell that the applied styles are in HTML, not from any CSS file (or did I miss something in my code)?
I tried with 1px solid !important; it's still not working.
If I understand your question correctly you could do something like this:
table[border] {
border: 1px solid black;
}
This will select any table that has a html border property eg:
<table border="1">
but will ignore those that don't
Here's a demo
Why are you using the border attributed to begin with? In HTML5, it's meant only to indicate that <table> is being used to draw an actual table, rather than just for layout. If you want to specify a table border, you should use something like 3rror404's solution (although I would explicitly use table[border="1"] as the selector to avoid problems if you also have tables with border="0" anywhere in the document.
I'm using a table to display tabular data, but I need to get the sizing pixel-perfect so that the contents don't end up taking more vertical space than I have available. Also, layout using css alone isn't feasible because I have dozens of elements.
Here is my simple test code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, td, tr, thead, tfoot, tbody, th, tf {
border-collapse: collapse;
margin: 0px;
padding: 0px;
border:0;
line-height:16px;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr style="height:16px">
<td>
<span style="font-size:10pt;">Here is some text</span>
</td>
</tr>
</table>
</body>
</html>
Basically I want the row of the table to take up only 16px, however, in this configuration it ends up taking 17px.
Inspecting the elements in FireBug it shows the span at 15px but the td and tr at 17, yet no padding, no border, etc...
In IE I get the same behavior, however there is a little more information about my mysterious extra pixel or two, seems there is an offset on the span element:
Finally, I can fix the problem by turning my span element into a div, (or by making the span element display:block, or even display: table-cell which I don't really understand). So I don't really need help solving my problem, but I want to understand why inline elements within table cells end up taking more space then they should. I tried google and the w3c spec but couldn't find anything useful.
Could it be something like the line-height of the span?
Edit: I realized that I didn't really answer the question. I did some poking around in Firebug (I'm on a Mac, so no access to IE at the moment), and it looks like it's not the span itself that's pushing the cell's height, but that the line-height of the td does end up controlling the height of the td. The height of the span is only 14px. I suspect that it's the empty text node (show's in IE's dev tools) that's pushing the height. One way to see this is to move the font-size specification up a node or two so that it will apply to the empty text node as well. At least in FB that seems to fix it and demonstrate that the span isn't the issue. (Maybe the empty text node doesn't exist if you use a div instead? Do you even need a span or a div, or could you have your text right in the td?)