Hoàng Trần Hoàng Trần - 2 months ago 6
CSS Question

Same css and html code but different style

I have a stranger problem. I create two tables with same code but they render different style.

Here is my code

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/

Please help me expand why?

Thank you in advance.Thank you in advance.

Answer

You need to give the cells a width, like below, as when not, they will adjust their size according to the remainder (space left) in each cell.

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>

Comments