Question

我是HTML5的新手。现在我开始构建一个乘法表。看起来没问题，但是当在表格上添加两位数字时，列的宽度不一样。如何使列具有相同的宽度？The table I built The desired table I want to make

这是我写的代码。即使我输入表的宽度是1200px，它也无法给出我想要的输出。如何解决问题？

<!DOCTYPE html>
<html>

<style>
table, th, td {
    border: 1px solid black;
}
th{
    background-color: rgb(200,200,200);
}
td{
    text-align:center;
}
#d1{
    background-color: rgb(200,200,200);
}
</style>
<table width="1200">
<tr>
    <th> </th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    <th>6</th>
    <th>7</th>
    <th>8</th>
    <th>9</th>  
</tr>
<tr>
    <td id="d1">1</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
</tr>
<tr>
    <td id="d1">2</td>
    <td>2</td>
    <td>4</td>
    <td>6</td>
    <td>8</td>
    <td>10</td>
    <td>12</td>
    <td>14</td>
    <td>16</td>
    <td>18</td>
</tr>
</table>
</html>

Answer 1

只需修正宽度，将其添加到td

下的css中

width: 50px;

结果：

td{
    text-align:center;
    width: 50px;
}

Answer 2

Check this out

td{
    text-align: center;
    width: 70px;
}

如何确保表列的宽度相同？

2 个答案: