CODEWITHSUNDEEP
jqueryhtmlcss
sTg
sTg

Reputation: 4434

HTML Design- Replace table with div

I have a specific design which I need to achieve completely using <div> tags but I am unable to though I have achieved using <table> tags which need to be replaced. Request expertise. Below is the design :

Design

Below is the code I have been trying and struggling with :

<div>
  <div class="row">
    <div class="col">
      <input type="label" value="fees">
    </div>
    <div class="col">
      <input type="label" value="1,258">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <input type="label" value="cost">
    </div>
    <div class="col">
      <input type="label" value="200">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <input type="label" value="Grand Total">
    </div>
    <div class="col">
      <input type="label" value="1,458">
    </div>
  </div>
</div>

Upvotes: 1

Views: 91

Answers (1)

Mohit Gupta
Mohit Gupta

Reputation: 739

Use this below code and apply css as you want...

.divTable{
	display: table;
	width: 400px;;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 0;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}
    <div class="divTable">
        <div class="divTableBody">
            <div class="divTableRow">
                <div class="divTableCell" style="text-align:right;">&nbsp;Fees</div>
                <div class="divTableCell">&nbsp;1258</div>
            </div>
            <div class="divTableRow">
                <div class="divTableCell" style="text-align:right;">&nbsp;Cost</div>
                <div class="divTableCell">&nbsp;20k</div>
            </div>
            <div class="divTableRow">
                <div class="divTableCell" style="text-align:left; border-top: 1px solid #000;">&nbsp;Grand Total</div>
                <div class="divTableCell" style="border-top: 1px solid #000;">&nbsp;1458</div>
            </div>
        </div>
    </div>

Upvotes: 2

Related Questions