使用 CSS 为表格着色

Question

我一直在尝试为这张图片中的不同表格着色但我似乎错过了一些东西，最后 3 张白色桌子应该是黄色的，但是当我尝试添加它们时，我要么在每个 td 上都变成黄色，要么在其中一些上变成黄色。

这是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Poop.css">
    <title>DEE IS A SEXY BASTERD!!! </title>
</head>
<body>
    <h1>table arcoiris:</h1>
    <div>
        <table>
            <tr>
                <!-- Background red-->
              <th></th><th></th><th></th><th></th>
            </tr>
            <tr>
                    <!-- Background orange add rowspan 2 to make 2 rows-->
                <td id="orange" rowspan="2"></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
    <!-- Background LIGHT GREEN ADD A COLSPAN 2 FOR THE OTHER 2 COLOUMS-->
        <tr id="seguanda_f">
            <td colspan="2"></td>
            <td></td>
        </tr>
<tr id="tercera_f">
    <td></td>
    <td></td>
    <td id="mag" rowspan="2" colspan="2"></td>
</tr>
<tr>
    <td class="blueviolet"></td>
    <td class="blueviolet"></td>
</tr>
        </table>
        <table><tr><td>Segunda tavla usada para esta anotacion</td></tr></table>
    </div>
</body>
</html>

这是CSS

div{
    width: 80%;
    height: 30%;
    margin-right: 10%;
    margin-left: 10%;
    text-align: center;
}

table, tr{
    width: 100%;
    margin: 10px;
}

th,td { height: 20px; }

th {   background-color: red;}

#orange{ background-color: orange; }

td:nth-child(3) { background-color: yellow; }

#seguanda_f{ background-color: lightgreen; }

#tercera_f { background-color: blue; }

.blueviolet{ background-color: blueviolet;}

#mag{ background-color: magenta;}

我尝试过使用 ID 来引导它 #ornage > td' #orange >td：第 n 个孩子，最后一个孩子。但还是什么都没有。

我期待填满空桌子，所以它们是黄色的

Answer 1

我更改了 HTML 代码，为每个要着色为黄色的元素添加新 ID，然后将所有元素的背景颜色设置为黄色。

更新了 HTML 代码，

<h1>table arcoiris:</h1>
<div>
    <table>
        <tr>
            <!-- Background red-->
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <!-- Background orange add rowspan 2 to make 2 rows-->
            <td id="orange" rowspan="2"></td>
            <td id="yellow"></td>
            <td id="yellow"></td>
            <td id="yellow"></td>
        </tr>
        <!-- Background LIGHT GREEN ADD A COLSPAN 2 FOR THE OTHER 2 COLOUMS-->
        <tr id="seguanda_f">
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr id="tercera_f">
            <td></td>
            <td></td>
            <td id="mag" rowspan="2" colspan="2"></td>
        </tr>
        <tr>
            <td class="blueviolet"></td>
            <td class="blueviolet"></td>
        </tr>
    </table>
    <table>
        <tr>
            <td>Segunda tavla usada para esta anotacion</td>
        </tr>
    </table>
</div>

更新了 CSS 代码，

#yellow {
    background-color: yellow;
}

使用 CSS 为表格着色

问题描述投票：0回答：1

1个回答

最新问题

使用 CSS 为表格着色

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1