Я хочу иметь только одну ячейку с границей (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>
Вы можете встроить или применить стиль 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>
Как это?
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;
}
Я бы предложил:
tr:nth-child(2) td:nth-child(2) {
border: 1px solid #000;
}
Или, чтобы поддерживать те браузеры, которые не реализуют :nth-child()
:
tr:first-child + tr td:first-child + td {
border: 1px solid #000;
}
HTML:
<td id="bordered">B2</td>
CSS:
#bordered {
border: 1px solid #000;
}
Попробуй это.