Question

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="animatedwebsite.css" rel="stylesheet" type="text/css" />

    <style>
        table, tr, td, th {
            border:1px solid black;   

        }

        table {
            width:100%;
            height:100%;


        }
        #logo {
            height:50px;
            width:50px;
            top:20px;
            left:10px;
            border:1px solid black;

        }
        html {
            height:100%;
            width:100%;
        }
        body {
            height:100%;
            background-color:deepskyblue;
            width:100%;

        }      
    </style>
</head>
<body>
  <!-- <img id="logo" src="http://mememarketmedia.s3.amazonaws.com/dank/tumblr_oamv1kgXlN1uy57v5o1_1280.jpg"/> -->
    <table>
        <tr height="12%" id="1">
            <th width="15%" id="logoarea"></th>
            <th width="85%" colspan="2" id="slogan"></th> 
        </tr>
        <tr height="8%" id="2">
            <td width="100%" colspan="3" id="navbararea"></td>
        </tr>
        <tr height="40%" id="3">
            <td width="100%" colspan="3" id="imgarea"></td>
        </tr>
        <tr id="4">
            <td width="33%" id="whyus"></td>
            <td width="34%" id="startnow"></td>
            <td width="33%" id="chatonline"></td>
        </tr>
        <tr id="5" height="5%">
            <td colspan="3" id="menu123"></td>
        </tr>
        <tr id="6" height="5%">
            <td colspan="3" id="footerarea"></td>
        </tr>
    </table>


</body>
</html>

所以我的问题更好地解释了，第一行第一行单元格和第四行单元格的宽度值一旦改变就会相互改变，只要我在第一行中定义了第4行单元格宽度开始的单元格宽度复制第一行。我不知道为什么会发生这种情况，因为它从未发生过，我知道这可能是我的愚蠢但我无法找到答案，所以请帮助！

Answer 1

这是表格单元格的预期行为。他们将一直排在专栏下面。

但看起来你正在设计表格，这不是设计网页的方法。表格用于表格数据。使用适当的语义标记（div，部分，文章，标题，图形等）来构建页面，然后使用CSS布置和设置页面样式。

Answer 2

那里有一个矛盾：

这是第一行：

<tr height="12%" id="1">
    <th width="15%" id="logoarea"></th>
    <th width="85%" colspan="2" id="slogan"></th> 
</tr>

注意：第一个单元格/ th有width="15%"

这是第四行：

<tr id="4">
    <td width="33%" id="whyus"></td>
    <td width="34%" id="startnow"></td>
    <td width="33%" id="chatonline"></td>
</tr>

此处第一个单元格/ td有width="33%"

无论浏览器是做什么的 - 难怪更改其中一个会以某种方式影响另一个 - 同一列中的单元格将始终具有相同的宽度（除非存在{{1}设置）

表格单元格宽度％值自行更改其他单元格宽度值？

2 个答案: