Консультация № 202690
01.05.2022, 21:39
0.00 руб.
1 4 1
Здравствуйте, уважаемые эксперты! Прошу вас ответить на следующий вопрос:
Задача в прикреплённом файле.
Прикрепленные файлы:

Обсуждение

давно
Советник
400484
472
02.05.2022, 22:09
общий
это ответ
Добрый день.
Пример решения.
index.html
[code lang=html]<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Консультация онлайн # 202693</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<table>
<tr>
<td id="ch">слово</td>
<td>слово</td>
<td>слово</td>
<td>слово</td>
</tr>
<tr>
<td id="ch">слово</td>
<td>слово</td>
<td>слово</td>
<td>слово</td>
</tr>
<tr>
<td>слово</td>
<td>слово</td>
<td>слово</td>
<td>слово</td>
</tr>
<tr>
<td>слово</td>
<td>слово</td>
<td>слово</td>
<td>слово</td>
</tr>
</table>
</body>
</html>[/code]
main.css
[code lang=css]table {
border: 1px solid black;
}

td {
border: 1px solid black;
}

td:nth-child(1) {
border: 5px solid black;
}

td:nth-child(4) {
border: 5px solid black;
}

#ch {
border-style: dashed
}[/code]
5
давно
Посетитель
399424
894
03.05.2022, 17:47
общий
Адресаты:
Большое спасибо за Ваш ответ. Только вот снова проблема: одно из условий выполняется, а второе - нет.
Не выполняются эти условия:
td:nth-child(1) {
border: 5px solid black;
}

td:nth-child(4) {
border: 5px solid black;
}

На фото прикрепил то, что выводится после Вашего кода.
Прикрепленные файлы:
давно
Посетитель
399424
894
03.05.2022, 17:50
общий
Адресаты:
Вот мои коды. Но я всё же хотел бы понять, как сделать с помощью td:nth-child так, чтобы всё работало корректно.

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!=HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<table border="1" class="table1">
<tbody>
<tr>
<td class="line1">он</td>
<td class="line2">она</td>
<td class="line3">оно</td>
<td class="line4">они</td>
</tr>
<tr>
<td class="line5">ты</td>
<td class="line6">вы</td>
<td class="line7">я</td>
<td class="line8">мы</td>
</tr>
<tr>
<td class="line9">а</td>
<td class="line10">б</td>
<td class="line11">в</td>
<td class="line12">г</td>
</tr>
<tr>
<td class="line13">д</td>
<td class="line14">е</td>
<td class="line15">ё</td>
<td class="line16">ж</td>
</tr>
</tbody>
</table>
</body>
</html>

<style>
.table1 {
border-collapse: collapse;
width: 50%;
height: 100px;
}
.line1, .line2, .line3, .line4, .line5, .line6, .line7, .line8, .line9, .line10, .line11, .line12, .line13, .line14, .line15, .line16
{
width: 10%;
height: 10px;
font-family: "Times New Roman", Times, serif;
font-size: large;
}
.line1, .line5, .line9, .line13, .line4, .line8, .line12, .line16
{
border: 5px solid black;
}
.line5, .line9
{
border: 5px dotted;
}
</style>
давно
Советник
400484
472
05.05.2022, 08:06
общий
Возможно, ваш браузер не поддерживает данный код. Вы можете почитать об этом в сети Интернет. Я использовал для проверки последнюю версию браузера Chrome.
Форма ответа