Adding 'col-' grid classes to table cells removes their cell border in Firefox and IE

[dzwillia]

Using the grid classes for sizing of columns in tables causes cell borders to not show in Firefox or IE. This is due to the position: relative style on these classes. Since table cells can't really have a position: relative, seems like an easy fix would just be to add the following CSS:

/* fix missing table cell borders when using 'col-' classes for column sizing */
table td[class*="col-"], table th[class*="col-"] {
  position: static;
}

Problem: http://jsfiddle.net/7GH6e/
Fixed: http://jsfiddle.net/7GH6e/1/

Let me know if you'd like me to submit a pull request to fix this.

[cvrebert]

We're trying to avoid using CSS wildcard/substring selectors like those. It'd be better to modify the grid system mixins instead.
Although I'm not sure to what degree using the grid system in tables is intended to be supported in the first place. Probably should be.

[cvrebert]

What versions of Firefox and IE? Which OSes?

[dzwillia]

IE 10.0.11 and FF 25.0.1 on Windows 7.

[dzwillia]

@cvrebert Yeah, I totally agree -- I was a big fan of this change with icons from BS 2.x => BS 3.x. I'm just using the same CSS wildcards that already exist in BS 3.0.2 (tables.less, around line 131). Since they're already there, it seemed to make sense to specify the same wildcard to do the override and fix the problem).

[mdo]

This also affects IE9, but strangely enough not IE8 in my quick test.

[dzwillia]

@mdo: Any chance we can also add this fix to table th and table td in case folks aren't using table col? Lemme know... If so, I can create a quick pull request for ya...