两个表的CSS相同，但单元格宽度不同

Question

我有一个奇怪的问题。我创建了两个具有相同代码的表，但它们呈现出不同的风格。

这是我的代码

＆＃13;

＆＃13;

table {
  border-collapse: collapse;
  width: 100%;
}
table,
th {
  border: 1px solid black;
}
table tr {
  border: 1px black dotted;
}
table tr td {
  border-right: solid 1px black;
}

＆＃13;

<div>
  Table1
</div>
<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr>
    <td colspan="4">1</td>
  </tr>
  <tr>
    <td colspan="2">12</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td colspan="4">1</td>
  </tr>
  <tr>
    <td colspan="2">12</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
<br/>
<div>
  Table2
</div>
<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr>
    <td colspan="4">a1</td>
  </tr>
  <tr>
    <td colspan="2">a12</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td colspan="4">a1</td>
  </tr>
  <tr>
    <td colspan="2">a12</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/6b9eL0xk/

请帮助我理解为什么列宽不同。

Answer 1

你需要给单元格一个宽度，如下所示，否则，它们将根据每个单元格中的剩余部分（剩余空间）调整它们的大小。

<div>
  Table1
</div>
<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr>
    <td colspan="4">1</td>
  </tr>
  <tr>
    <td colspan="2"> 12 </td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td colspan="4">1</td>
  </tr>
  <tr>
    <td colspan="2">12</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
<br/>
<div>
  Table2
</div>
<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr>
    <td colspan="4">a1</td>
  </tr>
  <tr>
    <td colspan="2"> a12 </td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td colspan="4">a1</td>
  </tr>
  <tr>
    <td colspan="2">a12</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

{{1}}

Answer 2

如果您的意思是列大小，那是因为您的文字长度

如表1所示进行更改

如果要修复此问题，请为列添加宽度