CODEWITHSUNDEEP
htmlcsshtml-tableborder
Thom
Thom

Reputation: 621

HTML CSS Only border <td>

I want to have only one cell with a border (B2). I don't want to use a table inside a table.

<table border="0">
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td>B2</td>  <!-- Only this cell should have a border -->
        <td>C2</td>
    </tr>
    <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
    </tr>
</table>

Upvotes: 0

Views: 100

Answers (4)

terrorfall
terrorfall

Reputation: 1121

You can inline or apply a CSS style to that element, like so...

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td style="border: 1px solid black">B2</td>  <!-- Only this cell should have a border -->
        <td>C2</td>
    </tr>
    <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
    </tr>
</table>

Here's a Fiddle

Upvotes: 1

WebSpartan
WebSpartan

Reputation: 186

HTML:

<td id="bordered">B2</td>

CSS:

#bordered {
border: 1px solid #000;
}

Try that.

Upvotes: 0

Albzi
Albzi

Reputation: 15619

Like this?

JsFiddle

HTML: 

<table border="0">
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td class='border-me'>B2</td>  <!-- Only this cell should have a border -->
        <td>C2</td>
    </tr>
    <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
    </tr>
</table>

CSS:

.border-me{
    border:2px solid red;
}

Upvotes: 1

David Thomas
David Thomas

Reputation: 253496

I'd suggest:

tr:nth-child(2) td:nth-child(2) {
    border: 1px solid #000;
}

JS Fiddle demo.

Or, to support those browsers that don't implement :nth-child():

tr:first-child + tr td:first-child + td {
    border: 1px solid #000;
}

JS Fiddle demo.

Upvotes: 1

Related Questions