Как разместить все стили к document.write в обном блоке?

109
23 июня 2022, 10:30

Написал простенькую программу для вывода таблицы умножения и хотел применить стили 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>

Answer 1

Судя по Вашим картинкам, Вы думаете, что если в html в произвольном месте написать

<td style="color:red;"></td>

то текст во всех ячейках таблиц на странице станет красным. Оно так не работает. А с body Вам повезло.

READ ALSO
Photoshop редактирование SmartObject
javascript

Photoshop редактирование SmartObject

Есть графический файл mockup psdВнутри файла смартобъекты

 161
Дублирующийся вывод комментария
javascript

Дублирующийся вывод комментария

Есть код для вывода комментариевНо при событии onClick с помощью метода addNewPost() выводиться 2 дублирующих комментария вместо одного

 135
Высота элемента RelativeLayout
Java

Высота элемента RelativeLayout

Возможно ли сделать высоту элемента таким образом, чтобы он был до самого низа экрана? То есть верхом он цепляется как android:layout_below="@id/someID"...

 133
Почему сравнение строк отличается?
Java

Почему сравнение строк отличается?

В первом методе выводится значение false, во втором - trueМои мысли: в test1(), когда создается d - уже в String Pool существует c

 142