HTML CSS Only border <td>

0

Я хочу иметь только одну ячейку с границей (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-table
border

4 ответа

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>

Здесь скрипка

Поделиться
  • 0
    Когда у меня 2 тд с границей, между границей остается немного места. я пробовал интервал границы: 0px; но это не сработало. Как можно поставить две границы рядом друг с другом, чтобы граница была непрерывной?
  • 0
    Добавьте это в начало таблицы cellpadding = "0" cellspacing = "0". Ответ обновлен.
1

Как это?

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;
}
Поделиться
  • 0
    Ба! Обыграй меня!
  • 0
    Ваш по-прежнему действует @PeteSimmons! У вас были встроенные стили, я не сделал!
Показать ещё 4 комментария
1

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

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.

Поделиться
  • 0
    Да, это решение, я использовал <td border = "1"> B2 </ td>, но это не сработало. Но это правильное решение!
0

HTML:

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

CSS:

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

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

Поделиться
  • 0
    Да просто заметил это, а затем исправил

Ещё вопросы

Сообщество Overcoder
Наверх
Меню