Консультация онлайн # 202690

Раздел: HTML / DHTML / XML / CSS
Автор вопроса: svrvsvrv (Посетитель)
Дата: 01.05.2022, 21:39 Консультация неактивна
Поступило ответов: 1
Здравствуйте, уважаемые эксперты! Прошу вас ответить на следующий вопрос:
Задача в прикреплённом файле.

-----
Прикрепленные файлы:

Ответ # 1, solowey (Советник)

Добрый день.
Пример решения.
index.html
Код [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>

main.css
Код [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
}

solowey

Советник
02.05.2022, 22:09
5

Мини-форум консультации # 202690

svrvsvrv

Посетитель

ID: 399424

325841

= общий =    03.05.2022, 17:47
Большое спасибо за Ваш ответ. Только вот снова проблема: одно из условий выполняется, а второе - нет.
Не выполняются эти условия:
td:nth-child(1) {
border: 5px solid black;
}

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

На фото прикрепил то, что выводится после Вашего кода.

-----
Прикрепленные файлы:

svrvsvrv

Посетитель

ID: 399424

325842

= общий =    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>
solowey

Советник

ID: 400484

325865

= общий =    05.05.2022, 08:06
Возможно, ваш браузер не поддерживает данный код. Вы можете почитать об этом в сети Интернет. Я использовал для проверки последнюю версию браузера Chrome.
Возможность оставлять сообщения в мини-форумах консультаций доступна только после входа в систему.
Воспользуйтесь кнопкой входа вверху страницы, если Вы зарегистрированы или пройдите простую процедуру регистрации на Портале.