Search code examples
htmlcssbootstrap-4html-table

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

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

enter image description here

My current table

<link href="https://cdn.usebootstrap.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered table-bordered">
  <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>

Solution

  • 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 class="table table-bordered table-bordered">
  <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>