Question

我将标头和表格的宽度设置为600px，但是在网页中标头看起来比表格宽。我有以下代码：

body {
    background-image: url('pic_a1q5.jpg');
    background-repeat: repeat;
    }
header {
    border: 15px dashed #FF00FF;
    padding: 10px;
    margin: 20px;
    color: #FFD700;
    font-family: "Lucida Console";
    width: 600px;
    }
table {
    padding: 10px;
    margin: 20px;
    border-style: dashed dotted solid double ;
    border-width: 15px;
    border-color: #7FFF00;
    text-align: left; 
    width: 600px;
    table-layout: fixed;
}
th {
    padding: 10px;
}
ol {
    padding:10px 30px 10px 30px;
}

.heading1 {
    background-color: #FF69B4;
    text-align: center;
    }
.heading2 {
    background-color: #FF8C00;
    text-align: center;
    }
.c21 {background-color: #7FFFD4;
    border: 5px solid #00008B;
    }
.c22 {background-color: #FFD700;
    border: 5px solid #B22222;
     }
.c31 {background-color: #DC143C;
    border: 5px solid #9400D3;
    }
.c32 {background-color: #006400;
    border: 5px solid #FFFAF0;
    }
ol.ol21 {
    list-style-type: upper-roman;
    }
ol.ol22 {
    list-style-type: upper-alpha;
    }   
ol.ol31 {
    list-style-type: upper-roman;
    counter-increment: start 2;
    }
ol.ol32 {
    list-style-type: lower-greek;
    }
ul.ul221 {
    list-style-image: url('flag-button.png');
}
ul.ul222 {
    color: #B22222;
}
ul.ul321 {
    list-style-type: square;
    color: #FFFAF0;
}
ul.ul322 {
    list-style-image: url('animated.gif');
}

<!DOCTYPE html>
<html lang ="en">
<head>
<title> A1Q5 </title>
<meta charset="UTF-8">
<link rel="stylesheet" href="covid.css">
</head>
<body>
<header>
    <h1>Covid 19 Stats by Random Guy</h1>
</header>
    
<table>
    <tr>
        <th  class="heading1">Continent</th>
        <th  class="heading2">Covid Data</th>
    </tr>
    <tr>
        <td class="c21"><ol class="ol21">
                <li>North America</li>
                <li>Just for ordered list</li>
            </ol>
        </td>
        
        <td class="c22"><ol class="ol22">
                <li>USA</li>
                <li><ul class="ul221">
                    <li>Total cases are 7,340,509</li>
                    <li>Total deaths are 209,609</li>
                    <li>Total recovered are 4,591,057</li>
                </ul></li>
                        
                <li>CANADA</li>
                <ul class="ul222">
                    <li>Total cases are 154,575</li>
                    <li>Total deaths are 9,270</li>
                    <li>Total recovered are 131,429</li>
                </ul>
            </ol>
        </td>
    </tr>
                                
    <tr>
        <td class="c31">
            <ol class="ol31">
                <li>Asia</li>
                <li>Just for ordered list</li>
            </ol>
        </td>
        <td class="c32">
            <ol class="ol32">
                <li>Japan</li>
                <li><ul class="ul321">
                    <li>Total cases are 81,690</li>
                    <li>Total deaths are 1,545</li>
                    <li>Total recovered are 74,607</li>
                </ul></li>
                        
                <li>China</li>
                <li><ul class="ul322">
                    <li>Total cases are 85,372</li>
                    <li>Total deaths are 4,634</li>
                    <li>Total recovered are 80,553</li>
                </ul></li>
            </ol>
        </td>
    </tr>
</table>
</body>
</html>

问题是标题比图片中的表宽。我不确定哪一部分不对。标题和表格的宽度有何不同？

Answer 1

这是因为要设置框大小，是要告诉浏览器在宽度中包括边框。

Answer 2

尝试增加表格的import { debounce } from "underscore"; const fetch = (value) => { axios.post("/uri", { search: value }).then(({ data }) => { setBreeds(data); }); }; <input type="text" onChange={e => debounce(fetch(e.target.value), 2000)} autoComplete="off" />。

标题和表格之间的宽度差

2 个答案: