Question 232243 in Html Question posted in
Some basic documentation can be found here.

HTML table with 2 lines of cells in a row

I am working with a HTML table and was wondering if a layout like shown in my screenshot are possible?

I know i can do this with <div>, but would prefer to keep the table formatting.

HTML table

Tags:

2

Answers


  1. 0

    Table cells do not wrap within a row, so you would need a new row. Within that row, the table cell would then span the other columns.

    Tables are for presenting tabular data (correlated rows and columns).
    If that is not your purpose (such as layout), then a different method would be preferable. Flexbox or grid would work nicely, depending on the use case.

    td {
  border: 1px solid;
  text-align: center;
  padding: .25em;
}
    <table>
  <caption>Caption should be included for accessibility</caption>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td colspan="4">Spans all 4 columns</td>
    </tr>
  </tbody>
<table>
    Login or Signup to reply.
  2. 0

    This is exactly what you wanted. Keep in mind that usually this is not how you should structure your html (Shifting a table cell into next row).

    *{
    margin: 0;
    padding: 0;
}

table{
    width: 100%;
    border: 1px solid red;
    padding: 5px;
}

tr{
    border: 1px solid blue;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

td{
    height: 50px;
    flex-basis: 24%;
    border: 1px solid green;
    margin: 5px;
    box-sizing: border-box;
}

td:last-child{
    flex-basis: 100%;
}
    <table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search