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.
Related
I have 2 tables on a single html page.
I would like to remove the border on just one of them.
The css I have currently is...
.table th, .table td {
border-top: none !important;
}
this is also linked with the table (I have bootstrap on it also, I think the table class is also linked with that?)
<table class="table">
<tbody>
<tr>
<th>1</th>
</tr>
<tr>
<td>1</td>
</tr> etc.....
So in the CSS I just want to make a rule that applies no border to only one of the 2 tables on my page. However I can't figure out how to to do it because the are using the same table class, and not sure if I need more than one rule? I've tried using parent selectors and ID selectors but could be calling them wrong. Thanks everyone!
You could just add a unique class or id to whichever table you do want to style and target that selector in your CSS. Like so:
HTML
<table class="table unique-name">
...whatever contents
</table>
CSS
.unique-name {
// some styles.
}
UPDATE
Here's a Fiddle to show you what I'm talking about.
Notice that the table with the class styled-table assigned to it has some formatting, while the table with the class unstyled-table has no formatting.
One way to do it would be to add another class to table you want to remove the border from.
Something like <table class="table noborder"> and then apply whatever css you want to the noborder class.
The proper way would be to have styles on the table, and then modify the table accordingly. This would be an example of how:
.table--bordered {
border: 1px solid #666;
}
<table class="table">
// No Borders
</table>
<table class="table table--bordered">
// With Borders
</table>
Bootstrap class for bordered table is table-bordered. If you don't use it, there'll be no border on table.
I have an issue that seems to be isolated to Chrome...which is usually NOT the way it goes. However, I have recreated the issue as purely as possible in the following plunkr.
http://plnkr.co/edit/k0viyc
To illustrate the problem, here is an image that displays the border in the highlighted row in Chrome and how it isn't showing in IE.
If you remove either of the following rows:
<tr class="spacer">
<td colspan="14" class="noBorder noBackground">
*** By removing this row, the extended border goes away ***
</td>
</tr>
You will see the associated border shows/hides.
We've been through lots of tests on this and can't isolate the problem. The primary css remains in the plunkr, including the inline styles and classes that are primarily byproducts of related bindings.
I would like to know if there is an error in the current design or if this is truly a bug in Chrome. If it's a bug, what is the least common elements here needed to recreate it? Is it worth submitting as a bug or is this just going to be a scenario we should just try to avoid.
Thanks for your time in advance.
Looks like to be a Chrome bug.
Minimal showcase reproducing it
.test {
border-collapse: collapse;
}
td {
border: solid 1px blue;
}
.no {
border: none;
}
<table class="test">
<tr>
<td>one</td>
<td class="no">two</td>
</tr>
<tr>
<td class="no" colspan="2">double</td>
</tr>
</table>
Chromium tracking (somehow) related border rendering bug
A little disturbing the mention
It's a known (old) issue in our table code. Collapsing borders are
determined based on adjacent cells and our code doesn't deal correctly
with spanning cells (we only consider the cell adjoining the first row
/ column in a row / column span). On top of that, our border
granularity is determined by the cell's span.
To fix this bug, we would need to overhaul our collapsing border code,
which is a big undertaking.
In conclusion:
If the table has border-collapse
and the cell is colspaning
Then different border settings (for that cell, implicitly) will fail
Posibilities to fix it:
Setting border-style: hidden to the cell has higher priority and will hide all the borders (not good)
Removing colspan in the spacers
or maybe remove fully the spacers rows and handle the display without them.
Some glitch related to tr.spacer.
As a workaround set colspan=7 to td in tr.spacer.
Since this seems to be a bug with Chrome—instead of using a colspan, you could write out the remaining cells needed to complete the row, and be sure that they don't have a class that includes a border.
This:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="3" class="no-border"> </td></tr>
Would become:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="2" class="no-border"> </td><td class="no-border"> </td></tr>
I had to use border-collapse, and was having the same problem. This simple HTML markup change worked for me.
After days of this issue being on my mind, a super hacky solution finally hit me.
Set the border color to the same color as your background.
td {
border: 1px solid (background color);
}
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;">
i have a table in my page, i use colgroups to format all cells in this column the same way, works good for background color and all. but cannot seem to figure out why text-align center does not work. it does not align the text centered.
example:
<table id="myTable" cellspacing="5">
<colgroup id="names"></colgroup>
<colgroup id="col20" class="datacol"></colgroup>
<colgroup id="col19" class="datacol"></colgroup>
<colgroup id="col18" class="datacol"></colgroup>
<thead>
<th> </th>
<th>20</th>
<th>19</th>
<th>18</th>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS:
#names {
width: 200px;
}
#myTable .datacol {
text-align: center;
background-color: red;
}
Only a limited set of CSS properties applies to columns, and text-align isn't one of them.
See "The mystery of why only four properties apply to table columns" for a description of why this is the case.
In your simple example, the easiest way to fix it would be to add these rules:
#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }
That would center all table cells, except the first column. This doesn't work in IE6, but in IE6 the text-align does actually (wrongly) work on the column. I don't know if IE6 supports all properties, or just a larger subset.
Oh, and your HTML is invalid. <thead> misses a <tr>.
See similar question: Why is styling table columns not allowed?
You are only allowed to set border, background, width and visibility properties, due to the fact that cells aren't direct descendents of columns, only of rows.
There are a few solutions. The simplest is to add a class to each cell in the column. Unfortunately that means more HTML but shouldn't bee a problem if you're generating tables from a database etc.
Another solution for modern browsers (i.e. not IE6) is to use some pseudo classes. tr > td:first-child will select the first cell in a row. Opera, Safari, Chrome and Firefox 3.5 also support the :nth-child(n) selector so you can target specific columns.
You could also use td+td to select from the second column onwards (it actually means "select all td elements that have one td element to its left). td+td+td selects from the third column - you can continue in this fashion, overriding properties. Honestly though, it's not great code.
With the following CSS, you can just append one or more classes to the the table element in order to align its columns accordingly.
CSS
.col1-right td:nth-child(1) {text-align: right}
.col2-right td:nth-child(2) {text-align: right}
.col3-right td:nth-child(3) {text-align: right}
HTML
<table class="col2-right col3-right">
<tr>
<td>Column 1 will be left</td>
<td>Column 2 will be right</td>
<td>Column 2 will be right</td>
</tr>
</table>
Example: http://jsfiddle.net/HHZsw/
In addition to the limitations mentioned in other answers, as of February 2018, visibility:collapse still does not work on colgroups in Chrome and Chromium based browsers, due to a bug. See "CSS col visibility:collapse does not work on Chrome". So I believe the currently usable properties are just border, background, width (unless you employ some sort of polyfill for Chrome and other Chromium-based browsers). The bug can be tracked at https://crbug.com/174167 .
I don't know why this bothers me so much, but when I create websites, I always try to do all my styling with CSS. However one thing I always have to remember to do when I'm working with tables is add cellspacing="0" and cellpadding="0"
Why is there not a CSS property to override these antiquated HTML 4 attributes?
Cellspacing :
table { border-collapse: collapse; }
As for cellpadding, you can do
table tr td, table tr th { padding: 0; }
mat already answered, but just for completeness:
padding → cellpadding
border-spacing → cellspacing
border-collapse → no HTML equivalent
It's also worth remembering that you can set separate horizontal and vertical values for the CSS ones e.g. border-spacing: 0 1px.
Eric Myer's reset stylesheet contains the following 'reset' style for table :
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
In addition TD, TR are reset :
thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
The reason I mention this is that he has a comment 'tables still need cellpadding=0'. I assume he put this in here for a reason - probably needed by some old browsers. Judging by the fact that this is one of the very few comments he included I'm guessing its important and that there's a good reason for it.
Based on this comment - and this comment alone! - i'm continuing to use cellspacing="0" in the markup unless someone tells me definitively (below) why I dont need to. It could however likely be unnecessary in any modern browser worth supporting these days.
table { border-collapse:collapse; }
I guess somebody considered cell spacing a “bad practice”. How I understand it is equivalent included in CSS2 standard but IE does not support this property. border-collapse allows to set spacing to 0 value. Cell padding may be achieved setting padding property to TD elements of a table.
It's still a shame that cells cannot inherit their default padding from a CSS property of the row (tr), otherwise from rowgroup (thead/tbdy/tfoot) if it's not "initial", colgroup if it's not "initial", or the whole table.
"cellspacing" dos not have this problem (but in fact they are margins around cells, and these outer margins collapse with margins of the neighouring cells, and with the inner paddings of the table/rowgroup or row, where they are filled by the table's "background" setting (the table background also includes the table's "border" which is drawn on top of it and that also clips this background on the outer edge of the table's border, notably when this border has rounded corners).
But for the cellpadding, It would be jut simpler to defined "cell-padding: n" as a table or group property rather than on each cell separately and explicitly with its own "border: n" style (which should only be used if we need to override the padding in some specific cells).