Как изменить стиль чисел внутри ячейки? - PullRequest
0 голосов
/ 16 января 2019

пытается изменить стиль числа внутри ячейки без изменения стиля самой ячейки.

Я изучаю веб-разработку, и кто-то предложил создать игру. Я пытаюсь создать игру судоку, с обычным стилем и настройкой. он выглядит так, как я хочу, за исключением того, что я не могу изменить цвет чисел внутри ячеек без изменения цвета самой ячейки. У меня есть стиль в отдельном файле CSS и попытался внести в него изменения, а также добавить в HTML-файл, но я не могу заставить его работать. Любые предложения будут оценены.

вот HTML

<html>
<head>
 <link rel="stylesheet" href="assignment 1.css">
 <title>sudoku</title>
</head>
 <table>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <colgroup><col><col><col>

  <tbody>
  <tr> <td>1 <td>  <td>3 <td>6 <td>  <td>4 <td>7 <td>  <td>9
  <tr> <td>  <td>2 <td>  <td>  <td>9 <td>  <td>  <td>1 <td>
  <tr> <td>7 <td>  <td>  <td>  <td>  <td>  <td>  <td>  <td>6
  <tbody>
  <tr> <td>2 <td>  <td>4 <td>  <td>3 <td>  <td>9 <td>  <td>8
  <tr> <td>  <td>  <td>  <td>  <td>  <td>  <td>  <td>  <td>
  <tr> <td>5 <td>  <td>  <td>9 <td>  <td>7 <td>  <td>  <td>1
  <tbody>
  <tr> <td>6 <td>  <td>  <td>  <td>5 <td>  <td>  <td>  <td>2
  <tr> <td>  <td>  <td>  <td>  <td>7 <td>  <td>  <td>  <td>
  <tr> <td>9 <td>  <td>  <td>8 <td>  <td>2 <td>  <td>  <td>5

и КСС

table { border-collapse: collapse; font-family: Palatino linotype, sans- 
serif; }
colgroup, tbody { border: solid medium;}
td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; 
padding: 0; }

https://en.wikipedia.org/wiki/Sudoku#/media/File:Sudoku_Puzzle_by_L2G-20050714_solution_standardized_layout.svg

Я хочу, чтобы внешний вид был похож на это, где постоянные числа другого цвета.

Ответы [ 2 ]

0 голосов
/ 16 января 2019

Я пробовал два варианта.

  1. Текст красного цвета, покрытый th вместо td
  2. Синий цвет тд имеет класс и стилизован в соответствии с ним.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table {
	font-size: 50px;
	background: #000;
}
table table {
	background: #fff;
}
table table td, table table th {
	border: 1px solid #000;
}
table table th {
	color: red;
}
table table td.blue{color:blue;}
</style>
</head>

<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="5">
  <tr>
    <td width="200"><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th align="center" valign="middle">1</th>
          <td align="center" valign="middle">2</td>
          <td align="center" valign="middle" class="blue">3</td>
        </tr>
        <tr>
          <td align="center" valign="middle">4</td>
          <th align="center" valign="middle" class="blue">5</th>
          <td align="center" valign="middle">6</td>
        </tr>
        <tr>
          <td align="center" valign="middle">7</td>
          <th align="center" valign="middle">8</th>
          <th align="center" valign="middle">9</th>
        </tr>
      </table></td>
    <td width="200"><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th align="center" valign="middle">1</th>
          <td align="center" valign="middle">2</td>
          <td align="center" valign="middle">3</td>
        </tr>
        <tr>
          <td align="center" valign="middle">4</td>
          <th align="center" valign="middle">5</th>
          <td align="center" valign="middle">6</td>
        </tr>
        <tr>
          <td align="center" valign="middle">7</td>
          <th align="center" valign="middle">8</th>
          <th align="center" valign="middle">9</th>
        </tr>
      </table></td>
    <td width="200"><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th align="center" valign="middle">1</th>
          <td align="center" valign="middle">2</td>
          <td align="center" valign="middle">3</td>
        </tr>
        <tr>
          <td align="center" valign="middle">4</td>
          <th align="center" valign="middle">5</th>
          <td align="center" valign="middle">6</td>
        </tr>
        <tr>
          <td align="center" valign="middle">7</td>
          <th align="center" valign="middle">8</th>
          <th align="center" valign="middle">9</th>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th align="center" valign="middle">1</th>
          <td align="center" valign="middle">2</td>
          <td align="center" valign="middle">3</td>
        </tr>
        <tr>
          <td align="center" valign="middle">4</td>
          <th align="center" valign="middle">5</th>
          <td align="center" valign="middle">6</td>
        </tr>
        <tr>
          <td align="center" valign="middle">7</td>
          <th align="center" valign="middle">8</th>
          <th align="center" valign="middle">9</th>
        </tr>
      </table></td>
    <td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th align="center" valign="middle">1</th>
          <td align="center" valign="middle">2</td>
          <td align="center" valign="middle">3</td>
        </tr>
        <tr>
          <td align="center" valign="middle">4</td>
          <th align="center" valign="middle">5</th>
          <td align="center" valign="middle">6</td>
        </tr>
        <tr>
          <td align="center" valign="middle">7</td>
          <th align="center" valign="middle">8</th>
          <th align="center" valign="middle">9</th>
        </tr>
      </table></td>
    <td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th align="center" valign="middle">1</th>
          <td align="center" valign="middle" class="blue">2</td>
          <td align="center" valign="middle">3</td>
        </tr>
        <tr>
          <td align="center" valign="middle">4</td>
          <th align="center" valign="middle">5</th>
          <td align="center" valign="middle">6</td>
        </tr>
        <tr>
          <td align="center" valign="middle">7</td>
          <th align="center" valign="middle">8</th>
          <th align="center" valign="middle">9</th>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th align="center" valign="middle">1</th>
          <td align="center" valign="middle">2</td>
          <td align="center" valign="middle">3</td>
        </tr>
        <tr>
          <td align="center" valign="middle">4</td>
          <th align="center" valign="middle">5</th>
          <td align="center" valign="middle">6</td>
        </tr>
        <tr>
          <td align="center" valign="middle">7</td>
          <th align="center" valign="middle">8</th>
          <th align="center" valign="middle">9</th>
        </tr>
      </table></td>
    <td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th align="center" valign="middle">1</th>
          <td align="center" valign="middle" class="blue">2</td>
          <td align="center" valign="middle" class="blue">3</td>
        </tr>
        <tr>
          <td align="center" valign="middle" class="blue">4</td>
          <th align="center" valign="middle">5</th>
          <td align="center" valign="middle" class="blue">6</td>
        </tr>
        <tr>
          <td align="center" valign="middle">7</td>
          <th align="center" valign="middle">8</th>
          <th align="center" valign="middle">9</th>
        </tr>
      </table></td>
    <td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th align="center" valign="middle">1</th>
          <td align="center" valign="middle">2</td>
          <td align="center" valign="middle">3</td>
        </tr>
        <tr>
          <td align="center" valign="middle">4</td>
          <th align="center" valign="middle">5</th>
          <td align="center" valign="middle">6</td>
        </tr>
        <tr>
          <td align="center" valign="middle">7</td>
          <th align="center" valign="middle">8</th>
          <th align="center" valign="middle">9</th>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
0 голосов
/ 16 января 2019

Вам необходимо закрыть теги tbody , tr и td . Чтобы узнать больше о таблицах: https://www.w3schools.com/html/html_tables.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...