CODEWITHSUNDEEP
htmlcsshtml-tablecell
Ojame
Ojame

Reputation: 169

Style content within table cell without adding an extra tag?

I have content within a table:

<td>1</td>
<td>2</td>
<td>3</td>

The table cells themselves have styling (like background-color and borders), but I want to have a circle around the numbers (not using images), using border-radius (with height, width etc.)... but I don't want to add an extra tag.

:before {content:<span>;}

Would be fine (and its :after selector), because I'm wrapping the element at a rendered level, but the content attribute wont render HTML tags.

Is there any way to do this, or do I have to wrap the content of each cell in another tag? Browser compatibility is Mobile Safari (webkit) as this is for a Cordova project, so use all the new methods you can think of.

Upvotes: 1

Views: 95

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157374

How about doing it like this?

Demo

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

td {
    position: relative;
    height: 40px;
    width: 40px;
}

td:after {
    content: '•';
    color: #f00;
    position: relative;
    font-size: 90px;
    left: -20px;
    top: 23px;
    z-index: -1;
}

Upvotes: 1

Related Questions