using text-align center in colgroup - html

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 .

Related

Unset td padding

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.

Erroneous table border displays in Chrome only **Confirmed Bug**

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">&nbsp</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);
}

Take a TR and force it to become vertical (like a list) using only CSS

I have markup like this:
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
That obviously creates a horizontal table. Is is possible, using only CSS to make that table display with only 1 item on each row? The desired output is similar to a unordered list with no margin or bullet points.
I imagine this should do it:
tr, td { display: block; }
It'll probably break the table it's in though and it does seem like an odd thing to be doing.
Update: I can't get this (or any other technique) to work in IE8 (normal or compatibility mode). It just refuses to change the display of table cells. Very weird. Sorry, I have no workaround for this.
What I ended up doing is this:
HTML as above.
CSS:
td { width:100%; float:left; }
It is surprisingly simple, yet it works really well.
The root cause of this problem is that IE says that tr and td are already block so using block has no effect. IE has no knowledge of the table-row, table-cell and table display modes.

Trying to minimize the table height (TABLE, TBODY and offset)

I am trying to minimize the height of the table shown below. Firebug
tells me that table's height is 29, tbody's 25, and both rows together's 23.
The layout tab does not show that there is any padding, margins or border.
Though, it tells me that tbody has 2 pixel offset, and the same for tr.
Is there a way to prevent that offset?
<body>
<table style="width: 100%">
<tr>
<td>foo
</td>
<td>bar
</td>
</tr>
<tr>
<td colspan=2></td>
</tr>
</table>
</body>
Related question: Why do browsers insert tbody element into table elements?
If I understood your question correctly, it looks like you want to do this on all your table elements:
padding:0px
border-collapse:collapse;
http://www.w3schools.com/Css/pr_tab_border-collapse.asp
In general using a good reset.css should help you.
Maybe "CSS reset" will help:
http://meyerweb.com/eric/tools/css/reset/
Some line deal with table.

Will a table row be displayed if all its cells are empty?

I have an empty table row just for separation between rows.
<tr>
<td colspan="5"></td>
</tr>
It's rendered in IE, FF, Opera and Safari. The question is, whether I should put some content inside of it or it is okay to leave it as it is?
Like:
<tr>
<td colspan="5"> </td>
</tr>
Well you could put an as column content to make sure the rows are displayed. The better way is to use CSS for spacing though.
Semantically, does the empty row serve a purpose, or is it purely for layout? If the latter, it may be worth considering dropping the empty row, and providing the separation via CSS. E.g.
<tr class="separate-below">
<td>Data before separater</td><td>More Data</td>...
</tr>
<tr>
<td>Data after separater</td><td>More Data</td>...
</tr>
With the following in the stylesheet:
TR.separate-below TD,TR.separate-below TH {
border-bottom: 1em solid white; /* use the background colour of a cell here */
}
Alternatively, you can use multiple <tbody> elements to group blocks of rows together (adding rules="groups" to the table element causes <tbody> elements to gain a horizontal border at top and bottom, and <colgroup> element to gain a border to their left and right):
<table rules="groups">
<thead>
<tr><th>Header</th><th>Header</th>...</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
...
</table>
As you can see in this example from W3Schools using the is the best way to do what you want.
This is a very old question, but if somebody still needs a solution (problem exists with display: table-cell or table-row elements)
here's the solution:
.emptyElement:after{
content: "\00a0";
}
I wanted to add my solution which is a modification of #Dariusz Sikorski solution.
td:empty:after, th:empty:after {
content: "\00a0";
}
if you want to put content inside, i would use a no-breaking-space: , rather than a normal blank
You may have already tried this but if your trying to add some space in between rows have you tried adding some padding.
CELLSPACING=Length (spacing between cells)
CELLPADDING=Length (spacing within cells)
Karl
To ensure that empty cells are displayed the following CSS can be used:
table { empty-cells:show; }
You can use multiple tbody tags to group table rows. It's totally valid and more semantic.