I want to create a table in the following format image below. If there is another way than using table . please guide . thank you


I want to create a table in the following format image below. If there is another way than using table . please guide . thank you


Asked by:- 2016IT
0
: 712 At:- 1/29/2023 2:33:00 PM
html css







1 Answers
profileImage Answered by:- vikas_jk

For creating above HTML structure it would be easier to create nested HTML table layout.

You can also do it using div's you will need div inside div with borders.

You can take a look at example here : https://jsfiddle.net/w6m47agx/

Which is not exactly what you have pointed but you will need similar HTML/CSS

<div class="table">
    <div class="row">
        <div class="cell">A</div>
        <div class="cell">B</div>
        <div class="cell">
          <div class="table">
            <div class="row">
                <div class="cell">Nested A</div>
                <div class="cell">Nested B</div>
                <div class="cell">Nested C</div>
            </div>
        </div>
        </div>
    </div>
      <div class="row">
        <div class="cell">E</div>
        <div class="cell">F</div>
        <div class="cell">G</div>
    </div>
</div>

CSS

.table { display: table; border: 1px solid }
.row { display: table-row; border: 1px solid}
.cell { display: table-cell;  border: 1px solid}

.table .row .cell .table{
  border-collapse: collapse
}

This is common pattern to make table -responsive also, but as we have CSS library like Bootstrap, it is easier to make HTML table responsive also.

 

0
At:- 1/29/2023 3:05:25 PM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use