Is it possible to make table with different columns for different rows?-CodePudding

I am using bootstrap4 and I want to make a table where first row have 3 columns, another two rows with 4 columns. i.e. to look like this

My current table

<link href="https://cdn.usebootstrap.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table >
  <tbody>
    <tr>
      <td width="25%">1П</td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>

    <tr>
      <td width="25%">2П</td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>

    <tr>
      <td width="25%">Прод.</td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Your code renders an incomplete table, so some browsers might try to make it complete producing an unexpected result. But you can simply add another cell in the first row, leave it empty and make its border invisible:

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #ccc;
}

tr:first-of-type>td:last-child {
  border: none;
}

<table >
  <tbody>
    <tr>
      <td width="25%">1П</td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>

    <tr>
      <td width="25%">2П</td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>

    <tr>
      <td width="25%">Прод.</td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Bootstrap comes with built-in class.

remove the border class table-bordered on table, then add borderclass to tds

<link href="https://cdn.usebootstrap.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table ><!-- demo purpose , use of w-50 and m-5 classes is optionnal-->
  <tbody>
    <tr>
      <td width="25%" >1П</td>
      <td width="25%" ></td>
      <td width="25%" ></td>
    </tr>

    <tr>
      <td width="25%" >2П</td>
      <td width="25%" ></td>
      <td width="25%" ></td>
      <td width="25%" ></td>
    </tr>

    <tr>
      <td width="25%" >Прод.</td>
      <td width="25%" ></td>
      <td width="25%" ></td>
      <td width="25%" ></td>
    </tr>
  </tbody>
</table>