CODEWITHSUNDEEP
htmlcssgoogle-chromewebkit
Omu
Omu

Reputation: 71188

css outline always on first table row on chrome

on google chrome when you have outline on a table row you get it only on the first row

so using this css:

tr { 
      outline:1px solid red; 
   }

you'll get the outline only on the first row, you can see that if you open this link in chrome:

http://jsbin.com/enupey/27/edit

anybody knows any workaround/fix for this ?

Thank You

Upvotes: 6

Views: 1548

Answers (8)

user1122857
user1122857

Reputation:

Fix to your problem : Change your CSS to.

tr
{
  outline:1px solid red;
  display:inherit;
}

OR

  tr
   {
     outline:1px solid red;
     display:block;
   }

If you are concerned with table layout then you have to fight with the spaces by setting margin to some negative value. see here :

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

A bug has already been reported follow up link : http://code.google.com/p/chromium/issues/detail?id=81373&q=outline&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary

Upvotes: 0

James Webster
James Webster

Reputation: 32066

Though it appears to be a bug, a little googling and I found a working solution as part of this question

Adding:

display: block;

appears to work:

tr
{
  outline:1px solid red;
  display: block;
}

The edited result can be seen here

I fiddled around with the CSS a bit more and came up with this:

td
{
  border-top:1px solid red;
  border-bottom:1px solid red;
  bottom-padding:-1px;
}

table
{
  border-left:2px solid red;
  border-right:2px solid red;
  border-top:1px solid red;
  border-bottom:1px solid red;
  bottom-padding:-1px;
}

Would that be suitable?

Caveat: I did only test this on Google Chrome for Mac.

Upvotes: 5

abhinav pratap
abhinav pratap

Reputation: 623

ya, its a bug

try border instead of outline, and give table style border-collapse:collapse

no change in html, css now 

tr.sel
{
  border:1px solid red; 

}
table{
  border-collapse:collapse;
}

Demo

fiddle , jsbin

Upvotes: -1

Josh
Josh

Reputation: 2895

With display: block you could do:

HTML:

<table>
  <tr>
    <td>ads</td>
    <td>azx</td>
    <td>bbb</td>
  </tr>
  <tr class='sel'>
    <td>ads</td>
    <td>azx</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>ads</td>
    <td>azx</td>
    <td>bbb</td>
  </tr>
</table>

CSS:

tr
{
display: block;
}

tr.sel
{
  outline: 1px solid red;
}

And the output is: http://jsbin.com/enupey/79/edit

Upvotes: 1

Atul Arvind
Atul Arvind

Reputation: 16733

You can use the code like below.

The Html code for table is

<table rules='none'>

</table>

and change the css with 

tr.sel
{
  border:1px solid red;
}

It will render the border on the middle raw in any browser.

Upvotes: 0

ScottS
ScottS

Reputation: 72261

This works as demonstrated here, without, I believe, any major side-effects:

tr
{
  display: table-row-group;
  outline:1px solid red;
}

Upvotes: 0

thirdender
thirdender

Reputation: 3951

This isn't a perfect answer for a few reasons, but I'm tossing it out there as an option… Set border-collapse: collapse; on the TABLE element, and style borders around every row's TD and TH elements. See this JSBin for the final output. Because it relies on border-collapse it won't work without the additional cellspacing HTML attribute in IE6/7. It also might not give the same effect you're looking for, if you're looking to outline each row individually. The solution also depends on the use of the :first-child and :last-child pseudo-selectors, and IE8 doesn't support :last-child. This can be worked around by adding "first" and "last" as classes on certain elements, but that's less than ideal.

Upvotes: 1

James Webster
James Webster

Reputation: 32066

The table tag has a rules attribute which allows you to define how where borders are "ruled" in the table. However, note that:

The rules attribute is supported in all major browsers.

Note: The rules attribute is not supported in IE, prior version 9.

Note: Chrome and Safari displays this attribute incorrectly: They add the affected outside borders in addition to the inside borders.

Combining this with the frame attribute and the CSS from your original question, this provides boxed outlines on each row:

<table rules="rows" frame="box">

Outcome

You can see this amendment to JSBin here

(Tested on Mac Chrome)

(I've added this as a separate answer because my previous answer concentrates on CSS, this solution, using only HTML seems distinct enough to separate the answers)

Upvotes: 1

Related Questions