HTML CSS Только граница <td>

Question

Я хочу иметь только одну ячейку с рамкой (B2). Я не хочу использовать таблицу внутри таблицы.

<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>

html css html-table border

0

Thom 21 Мар 2014 в 20:08

Answer 1

Вы можете встроить или применить стиль CSS к этому элементу, например ...

<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>

Вот скрипка

1

terrorfall 21 Мар 2014 в 20:23

Когда у меня 2 тд с каймой, между каймой есть немного места. я попробовал интервал между границами: 0px; но это не сработало. Как можно поставить две границы рядом друг с другом, чтобы граница была непрерывной?

–

Thom

21 Мар 2014 в 20:19

Добавьте это в верхнюю часть таблицы cellpadding="0" CellsPacing="0". Ответ обновлен.

–

terrorfall

21 Мар 2014 в 20:22

Answer 2

Я бы предложил:

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

Демонстрация JS Fiddle.

Или для поддержки тех браузеров, которые не поддерживают :nth-child():

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

Демонстрация JS Fiddle.

1

David Thomas 21 Мар 2014 в 20:08

Да, это решение, я использовал B2, но это не сработало. Но это правильное решение!

–

Thom

21 Мар 2014 в 20:11

Answer 3

Как это?

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;
}

1

Albzi 21 Мар 2014 в 20:09

Ваше все еще в силе @PeteSimmons! У вас были встроенные стили, у меня нет!

–

Albzi

21 Мар 2014 в 20:13

К тому же ты получил +1, а я нет :( @PeteSimmons

–

Albzi

21 Мар 2014 в 20:14

Answer 4

HTML:

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

CSS:

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

Попробуй это.

0

WebSpartan 21 Мар 2014 в 20:11

Ага, только что заметил, потом исправил

–

WebSpartan

21 Мар 2014 в 20:13

HTML CSS Только граница <td>

4 ответа

Похожие вопросы

Новые вопросы

html