0

I tried to add dot after a table, by using table::after selector to create a dot element and center it with margin: 5px auto 5px auto;. It works, but it seems dot is added after the first table column, not after the table itself:

enter image description here

Why and how to fix it?

Live code http://cssdeck.com/labs/ew6g4ntf/0

2
  • What makes you think that it's after the first column? When I inspect it with firebug, it seems to be outside the <tbody>
    – coopersita
    Oct 30, 2012 at 20:54
  • This rule margin: 5px auto 5px auto; should place it in the center of its container, and it looks like it's in the center of first table column. Yes in inspector it's behind table, but visually it looks like it's behind the first column.
    – Alex Craft
    Oct 30, 2012 at 21:00

1 Answer 1

1

This is a somewhat weird way of doing it, but going along your solution, it's probably because that's how tables work best, on a cell basis. So that's why the table::after also resembles a cell.

But, if you put this whole thing in a div, and you float it to left, and you do this ::after thing with the div instead of the table, it will work well.

Here's a preview

2
  • Yes, but HTML markup will be not clean, there will be additional <div> element there.
    – Alex Craft
    Oct 30, 2012 at 21:02
  • Yeah... I still think your best bet would be to add a <span class="dot"/> for a clear and easier to read mark-up, instead of the stuff::after. Oct 30, 2012 at 21:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.