Написал простенькую программу для вывода таблицы умножения и хотел применить стили css
к данной таблице в document.write()
. Чтобы не "загромождать" код, хотел все стили для <table>
и <td>
поместить в один(тот, который самый последний) document.write()
, но почему-то, когда я это делаю, все стили "слетают" кроме стилей для тега <body>
. Подскажите как сделать так, чтобы этого не проиходило, если это конечно возможно.
function multiplication_table() {
a = prompt('Enter the number of rows', '0');
b = prompt('Enter the number of columns', '0');
document.write('<table style="display: inline-block; align-items: center; background: #e4ecff; color: #2972d1; padding: 7px; border: 4px solid #7bb6ca; border-radius: 15px;">'); // begin of the table
for(var row = 1; row <= a; row++)
{
document.write('<tr>'); // begin of row
for(var column = 1; column <= b; column++)
{
document.write('<td style="min-width: 40px; width: auto; text-align: center; vertical-align: middle; border: 2px solid #bbd9ff; font-weight: 700;">' + (row*column) + '</td>'); // make cells
}
document.write('</tr>'); // end of row
}
document.write('</table>'); // end of the table
document.write('<body style="background: #333; color: #333; font-size: 18px; text-align: center; font-family: Courier, monospace;"></body>'); // styles for document.write
}
body{
background: #333;
color: #fff;
text-align: center;
margin: 0;
}
input{
border: none;
outline: none; /* clear button styles after a click */
width: 200px;
padding: 12px 16px;
margin: 10px;
color: white;
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
background: #333; /*#2196F3*/
cursor: pointer;
border: 2px solid #fff;
border-radius: 100px;
}
input:hover{
transition: background 0.3s ease, color 0.3s ease;
color: #333;
background: #fff; /*#39a1f4*/
box-shadow: 0px 5px 10px -5px black;
}
input:active{
transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
color: #000000;
background: #d1d1d1; /*#39a1f4*/
border: 2px solid #d1d1d1;
box-shadow: 0px 5px 10px -5px black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First script</title>
</head>
<body>
<p>
<input type='button' value='Таблица умножения' onclick='multiplication_table()'/>
</p>
</body>
</html>
Судя по Вашим картинкам, Вы думаете, что если в html в произвольном месте написать
<td style="color:red;"></td>
то текст во всех ячейках таблиц на странице станет красным. Оно так не работает. А с body
Вам повезло.
Есть код для вывода комментариевНо при событии onClick с помощью метода addNewPost() выводиться 2 дублирующих комментария вместо одного
Возможно ли сделать высоту элемента таким образом, чтобы он был до самого низа экрана? То есть верхом он цепляется как android:layout_below="@id/someID"...
В первом методе выводится значение false, во втором - trueМои мысли: в test1(), когда создается d - уже в String Pool существует c