如何更改单元格中数字的样式？

时间：2019-01-16 03:41:25

标签： css html5

尝试更改单元格内部数字的样式，而无需同时更改单元格本身的样式。

我正在学习网络开发，有人建议创建游戏是一个好主意。我正在尝试创建具有常规样式和设置的数独游戏。它正在寻找我想要的方式，除了我不能更改单元格内部数字的颜色而不更改单元格本身的颜色。我在单独的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

    

和CSS 

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 :(得分：0)

您需要关闭正文， tr 和 td 标签。要了解有关表格的更多信息：https://www.w3schools.com/html/html_tables.asp

答案 1 :(得分：0)

我尝试了两种选择。

  1. 用th代替td覆盖的红色文本
  2. 蓝色td有一个类，并根据其样式。

<!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>

相关问题
最新问题