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

Question

我有一个奇怪的问题。我用相同的代码创建了两个表，但它们呈现不同的样式。

这是我的代码

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;
}

<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>

https://jsfiddle.net/6b9eL0xk/

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

Answer 1

您需要给单元格一个宽度，如下所示，如果没有，它们将根据每个单元格中的余数（space left）调整它们的大小。

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;
    width: 25%;                         /*  added property  */
}

<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>

Answer 2

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

改成Table1

如果您想解决这个问题，请为您的列添加宽度

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

Same CSS for two tables but the cell widths are different

html

css

css-tables