I've been trying this without luck. I want to have 5 columns within bootstrap, each "2" width. I want to offset the second column so that there is a "2" offset between column one and two. What we end up with is this:
2 Width Pricing Table - 2 Width Space - 2 Width Pricing Table - 2 Width Pricing Table - 2 Width Pricing Table - 2 Width Pricing Table.
Here is my code: http://www.bootply.com/MxnvNuTU6Q
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Bronze
</h3>
</div>
<div class="panel-body">
<h1>
$10<span class="subscript">/mo</span>
</h1>
<small>1 month FREE trial</small>
<table class="table">
<tbody>
<tr>
<td>
1 Account
</td>
</tr>
<tr class="active">
<td>
1 Project
</td>
</tr>
<tr>
<td>
100K API Access
</td>
</tr>
<tr class="active">
<td>
100MB Storage
</td>
</tr>
<tr>
<td>
Custom Cloud Services
</td>
</tr>
<tr class="active">
<td>
Weekly Reports
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-2 col-md-offset2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Bronze
</h3>
</div>
<div class="panel-body">
<h1>
$10<span class="subscript">/mo</span>
</h1>
<small>1 month FREE trial</small>
<table class="table">
<tbody>
<tr>
<td>
1 Account
</td>
</tr>
<tr class="active">
<td>
1 Project
</td>
</tr>
<tr>
<td>
100K API Access
</td>
</tr>
<tr class="active">
<td>
100MB Storage
</td>
</tr>
<tr>
<td>
Custom Cloud Services
</td>
</tr>
<tr class="active">
<td>
Weekly Reports
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Bronze
</h3>
</div>
<div class="panel-body">
<h1>
$10<span class="subscript">/mo</span>
</h1>
<small>1 month FREE trial</small>
<table class="table">
<tbody>
<tr>
<td>
1 Account
</td>
</tr>
<tr class="active">
<td>
1 Project
</td>
</tr>
<tr>
<td>
100K API Access
</td>
</tr>
<tr class="active">
<td>
100MB Storage
</td>
</tr>
<tr>
<td>
Custom Cloud Services
</td>
</tr>
<tr class="active">
<td>
Weekly Reports
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Bronze
</h3>
</div>
<div class="panel-body">
<h1>
$10<span class="subscript">/mo</span>
</h1>
<small>1 month FREE trial</small>
<table class="table">
<tbody>
<tr>
<td>
1 Account
</td>
</tr>
<tr class="active">
<td>
1 Project
</td>
</tr>
<tr>
<td>
100K API Access
</td>
</tr>
<tr class="active">
<td>
100MB Storage
</td>
</tr>
<tr>
<td>
Custom Cloud Services
</td>
</tr>
<tr class="active">
<td>
Weekly Reports
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Bronze
</h3>
</div>
<div class="panel-body">
<h1>
$10<span class="subscript">/mo</span>
</h1>
<small>1 month FREE trial</small>
<table class="table">
<tbody>
<tr>
<td>
1 Account
</td>
</tr>
<tr class="active">
<td>
1 Project
</td>
</tr>
<tr>
<td>
100K API Access
</td>
</tr>
<tr class="active">
<td>
100MB Storage
</td>
</tr>
<tr>
<td>
Custom Cloud Services
</td>
</tr>
<tr class="active">
<td>
Weekly Reports
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
What have I done wrong, is col-md-offset2 not the right class?
col-md-offset2
should be
col-md-offset-2
That should create a gap between the first and second columns.
Related
Trying to put two tables next to one another. One col-md-4 and the other col-md-8 I want the 4 to be on the left and the 8 to be on the right. Left table being game messages and buttons while the right table is the tic tac toe board. My understanding is when using bootstrap I just need columns to add up to a total of 12.
</head>
<body class="bodyNormal">
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align: center">
<h3 class="mainimg">Tic Tac Toe Game</h3>
</div>
</div>
<div class="row bg-white">
<div class="col-md-4">
<table class="table">
<tbody>
<tr>
<th>
<button class="btn" id="newGame">🔄 New game</button>
</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>
<h2 class="player1Turn hidden">Player 1 Turn</h2>
<h2 class="player2Turn hidden">Player 2 Turn</h2>
</th>
</tr>
</tbody>
</table>
<div class="col-md-8">
<table>
<tr>
<td class="grid">7<img src="X.jpg"</td>
<td class="vert grid">8<img src="O.jpg"</td>
<td class="grid">9<img src="X.jpg"</td>
</tr>
<tr>
<td class="hori grid">4<img src="O.jpg"</td>
<td class="vert hori grid">5<img src="X.jpg"</td>
<td class="hori grid">6<img src="O.jpg"</td>
</tr>
<tr>
<td class="grid">1<img src="X.jpg"</td>
<td class="vert grid">2<img src="O.jpg"</td>
<td class="grid">3<img src="X.jpg"</td>
</tr>
</table>
</div>
</div>
</div>
<br />
<script src="index.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
You forgot one div close for col-md-4
</table></div> /*Close Here One div*/
<div class="col-md-8">
https://jsfiddle.net/lalji1051/y0k4bs6p/3/
Problem is you forgot to close div for col-md-4.
Updated code
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align: center">
<h3 class="mainimg">Tic Tac Toe Game</h3>
</div>
</div>
<div class="row bg-white">
<div class="col-md-4">
<table class="table">
<tbody>
<tr>
<th>
<button class="btn" id="newGame">🔄 New game</button>
</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>
<h2 class="player1Turn hidden">Player 1 Turn</h2>
<h2 class="player2Turn hidden">Player 2 Turn</h2>
</th>
</tr>
</tbody>
</table>
</div>
<div class="col-md-8">
<table>
<tr>
<td class="grid">7<img src="X.jpg" </td>
<td class="vert grid">8<img src="O.jpg" </td>
<td class="grid">9<img src="X.jpg" </td>
</tr>
<tr>
<td class="hori grid">4<img src="O.jpg" </td>
<td class="vert hori grid">5<img src="X.jpg" </td>
<td class="hori grid">6<img src="O.jpg" </td>
</tr>
<tr>
<td class="grid">1<img src="X.jpg" </td>
<td class="vert grid">2<img src="O.jpg" </td>
<td class="grid">3<img src="X.jpg" </td>
</tr>
</table>
</div>
</div>
</div>
I am trying to expand/collapse the following row if row with class='sector' is clicked
This same code seems to work for many people as per other stackoverflow answers but it is not working for me and I wonder why? I do not know much jquery but this seems to me to be workable but still does not work.
Kindly give a simple solution
$(document).ready(function() {
$("td[colspan=2]").hide();
$("tr.sector").click(function() {
$(this).next().toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table">
<tr>
<td scope="col">Sector</th>
<td scope="col">Total Qty</th>
</tr>
<tr class="sector">
<td>Sector no. 2</td>
<td>
M : 1, </td>
</tr>
<tr>
<td colspan="2">
<p>
<div>
<div class="row">
<div class="col-4">Plot no. 5 | NPSC Apartment</div>
<div class="col-4">1 Packets</div>
<div class="col-4">Details</div>
</div>
</div>
</p>
</td>
</tr>
<tr class="sector">
<td>Sector no. 3</td>
<td>
M : 2, MJ : 1, </td>
</tr>
<tr>
<td colspan="2">
<p>
<div>
<div class="row">
<div class="col-4">Plot no. 1 | Heritage Tower (Sawan CGHS)</div>
<div class="col-4">1 Packets</div>
<div class="col-4">Details</div>
</div>
<div class="row">
<div class="col-4">Plot no. 8 | Himachali Apartment</div>
<div class="col-4">2 Packets</div>
<div class="col-4">Details</div>
</div>
</div>
</p>
</td>
</tr>
</table>
</div>
</div>
You are hiding the td[colspan=2] inside tr and trying to toggle that same tr without actuality showing the td you have hidden in first place.
So you need to use next to get next tr sibling and find inside td[colspan=2] you have hidden and toggle that.
Please read documentation on Jquery Tree Traversal and next time watch for your HTML tree. Its all well documented and explained on link provided.
$(document).ready(function() {
$("tr > td[colspan=2]").hide();
$("tr.sector").click(function() {
$(this).next().find("td[colspan=2]").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table">
<tr>
<td scope="col">Sector</th>
<td scope="col">Total Qty</th>
</tr>
<tr class="sector">
<td>Sector no. 2</td>
<td>
M : 1, </td>
</tr>
<tr>
<td colspan="2">
<p>
<div>
<div class="row">
<div class="col-4">Plot no. 5 | NPSC Apartment</div>
<div class="col-4">1 Packets</div>
<div class="col-4">Details</div>
</div>
</div>
</p>
</td>
</tr>
<tr class="sector">
<td>Sector no. 3</td>
<td>
M : 2, MJ : 1, </td>
</tr>
<tr>
<td colspan="2">
<p>
<div>
<div class="row">
<div class="col-4">Plot no. 1 | Heritage Tower (Sawan CGHS)</div>
<div class="col-4">1 Packets</div>
<div class="col-4">Details</div>
</div>
<div class="row">
<div class="col-4">Plot no. 8 | Himachali Apartment</div>
<div class="col-4">2 Packets</div>
<div class="col-4">Details</div>
</div>
</div>
</p>
</td>
</tr>
</table>
</div>
</div>
i have costume model that add some fields to invoice report , but i need to move up tax table up.do i need to delete rows.
is it done by doing something like this?
<xpath expr="//div[#class='row mt32 mb32']" position="attributes">
<attribute name="class">row mt8 mb8</attribute>
</xpath>
EDITED:
i'm extending Account invoice report addons/account/report_invoice.xml bellow is the table that i want to move up. i can't past all report here as it is to big.
EDIT2
https://github.com/odoo/odoo/blob/9.0/addons/account/views/report_invoice.xml link to original report. i want to move up tax table along side subtotal table. :)
<div class="row">
<div class="col-xs-4 pull-right">
<table class="table table-condensed">
<tr class="border-black">
<td><strong>Subtotal</strong></td>
<td class="text-right">
<span t-field="o.amount_untaxed" t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
</tr>
<t t-foreach="o._get_tax_amount_by_group()" t-as="amount_by_group">
<tr>
<td><span t-esc="amount_by_group[0]"/></td>
<td class="text-right">
<span t-esc="amount_by_group[1]"/>
</td>
</tr>
</t>
<tr class="border-black">
<td><strong>Total</strong></td>
<td class="text-right">
<span t-field="o.amount_total" t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
</tr>
</table>
</div>
</div>
<div class="row" t-if="o.tax_line_ids">
<div class="col-xs-6">
<table class="table table-condensed">
<thead>
<tr>
<th>Tax</th>
<th class="text-right">Base</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<tr t-foreach="o.tax_line_ids" t-as="t">
<td><span t-field="t.name"/></td>
<td class="text-right">
<span t-field="t.base"
t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
<td class="text-right">
<span t-field="t.amount"
t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You can do it using following way :
Add tax table before total section and remove existing one.
<template id="account_invoice_report_document_tax_table_ept" inherit_id="account.report_invoice_document">
<xpath expr="//div[#t-if='o.tax_line_ids']" position="replace">
</xpath>
<xpath expr="//div[#class='col-xs-4 pull-right']" position="before">
<div t-if="o.tax_line_ids">
<div class="col-xs-6">
<table class="table table-condensed">
<thead>
<tr>
<th>Tax</th>
<th class="text-right">Base</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<tr t-foreach="o.tax_line_ids" t-as="t">
<td><span t-field="t.name"/></td>
<td class="text-right">
<span t-field="t.base"
t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
<td class="text-right">
<span t-field="t.amount"
t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</xpath>
</template>
This may help you.
so after the text containing the emergency hotlines were aligned properly, I just cant seen to place the text under the image in order to present the data three in a row (I tried col-4 but json messed it up). My goal is image, then content of the numbers directly below it. I tried: text-align, float, display, media. any help would be appreciated thank you.
heres the current situation:
enter image description here
UPDATE: here is the JSfiddle of the question, placeholders are used to show the positioning. https://jsfiddle.net/ktbmLaq8/
<div class="module-text" ng-controller="VolunteerAidCtrl">
<p class="services-margin">In an emergency, please contact the appropriate service in their respective ASEAN countries for the proper response. These numbers can be called either on landline and mobile and consist of the Police Department, Fire Department, and the Hospital Ambulance. </p>
<hr>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." ng-model="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
<hr>
<div class="row">
<div class="col-md-6" ng-repeat="service in services | filter:search">
<div class="media">
<div class="media-left">
<img class="flagsize" ng-src="{{service.flagimgurl}}">
</div>
<div class="media-body">
<h4 class="media-heading country-title" ng-bind="service.country"></h4>
<table class="table">
<tr class="remove-border">
<td ng-bind="service.hl1"></td>
<td class="text-left">
<div ng-bind="service.hl1num1"></div>
<div ng-bind="service.hl1num2"></div>
<div ng-bind="service.hl1num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl2"></td>
<td class="text-left">
<div ng-bind="service.hl2num1"></div>
<div ng-bind="service.hl2num2"></div>
<div ng-bind="service.hl2num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl3"></td>
<td class="text-left">
<div ng-bind="service.hl3num1"></div>
<div ng-bind="service.hl3num2"></div>
<div ng-bind="service.hl3num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl4"></td>
<td class="text-left">
<div ng-bind="service.hl4num1"></div>
<div ng-bind="service.hl4num2"></div>
<div ng-bind="service.hl4num3"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_cambodia.png">
<table class="services">
<tr>
<td class="country-title">Cambodia</td>
</tr>
<tr>
<td>Fire</td>
<td>:114</td>
</tr>
<tr>
<td></td>
<td>:023 723 555</td>
</tr>
<tr>
<td>Police</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:023 366 841</td>
</tr>
<tr>
<td></td>
<td>:023 720 235</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:119</td>
</tr>
<tr>
<td></td>
<td>:023 724 891</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_indonesia.png">
<table class="services">
<tr>
<td class="country-title">Indonesia</td>
</tr>
<tr>
<td>Police</td>
<td>:110</td>
</tr>
<tr>
<td></td>
<td>:112</td>
</tr>
<tr>
<td>Fire</td>
<td>:113</td>
</tr>
<tr>
<td>Ambulance and Rescue  </td>
<td>:118</td>
</tr>
<tr>
<td>Medical Emergencies</td>
<td>:119</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_laos.png">
<table class="services">
<tr>
<td class="country-title">Laos</td>
</tr>
<tr>
<td>Fire</td>
<td>:190</td>
</tr>
<tr>
<td>Police</td>
<td>:191</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:195</td>
</tr>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_malaysia.png">
<table class="services">
<tr>
<td class="country-title">Malaysia</td>
</tr>
<tr>
<td>Fire and Rescue</td>
<td>:994</td>
</tr>
<tr>
<td></td>
<td>:114</td>
</tr>
<tr>
<td>Ambulance/Police  </td>
<td>:999</td>
</tr>
<tr>
<td></td>
<td>:112</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_myanmar.png">
<table class="services">
<tr>
<td class="country-title">Myanmar</td>
</tr>
<tr>
<td>Fire</td>
<td>:191</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:192</td>
</tr>
<tr>
<td>Police</td>
<td>:199</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_philippines.png">
<table class="services">
<tr>
<td class="country-title">Philippines</td>
</tr>
<tr>
<td>Disaster Risk    </td>
<td>:(02) 911-1406</td>
</tr>
<tr>
<td></td>
<td>:(02) 912-1406</td>
</tr>
<tr>
<td>Police</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:911</td>
</tr>
<tr>
<td>Fire</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:(02) 729-5166</td>
</tr>
<tr>
<td></td>
<td>:(02) 410-6319</td>
</tr>
<tr>
<td>Red Cross</td>
<td>:(02) 527-0000</td>
</tr>
<tr>
<td></td>
<td>:(02) 527-8385</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_singapore.png">
<table class="services">
<tr>
<td class="country-title">Singapore</td>
</tr>
<tr>
<td>Fire and Ambulance  </td>
<td>:995</td>
</tr>
<tr>
<td>Police</td>
<td>:999</td>
</tr>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_thailand.png">
<table class="services">
<tr>
<td class="country-title">Thailand</td>
</tr>
<tr>
<td>Police</td>
<td>:191</td>
</tr>
<tr>
<td></td>
<td>:1195</td>
</tr>
<tr>
<td>Fire</td>
<td>:199</td>
</tr>
<tr>
<td>Ambulance and Rescue  </td>
<td>:1554</td>
</tr>
<tr>
<td></td>
<td>:1669</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_vietnam.png">
<table class="services">
<tr>
<td class="country-title">Vietnam</td>
</tr>
<tr>
<td>Police</td>
<td>:113</td>
</tr>
<tr>
<td>Fire</td>
<td>:114</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:115</td>
</tr>
</table>
</div> -->
The problem is that in your HTML structure, you are listing the information for all countries in a single collective table, while displaying the flags for each country outside of the table. It's not very easy to 'break up' this information that's all stored in the table.
The best way to solve this is to handle both the flag and service information for each country at the same time. In order to do this, first we convert all of your table elements to <div>s, add classes to each of the new divs, and slightly change their order:
<div class="country">
<div class="media-left">
<a href="#">
<img class="media-object flagsize" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Flag_of_Brunei_1906-1959.svg/1000px-Flag_of_Brunei_1906-1959.svg.png" alt="...">
</a>
</div>
<div class="country-info">
<h4 class="media-heading country-title" ng-bind="service.country">Brunei</h4>
<div class="left" ng-bind="service.hl1">Service 1</div>
<div class="right" ng-bind="service.hl1num1">111</div>
<div class="left" ng-bind="service.hl2">Service 2</div>
<div class="right" ng-bind="service.hl1num2">222</div>
<div class="left" ng-bind="service.hl3">Service 2</div>
<div class="right" ng-bind="service.hl1num3">333</div>
</div>
</div>
Then you can target the respective contents much more easily :)
img.flagsize, .country-info {
max-width: 200px
}
.left {
float: left;
clear: left;
}
.right {
float: right;
clear: right;
}
You'll also need to specify that .country-info should be the same width as img.flagsize, or else the information will get pushed to the right of the page:
img.flagsize, .country-info {
max-width: 200px;
}
I've created a fiddle showcasing this here.
With this structure, you can change just about any aspect of the layout you'd like -- margins, padding, and heights no longer pose an issue ;)
Hope this helps! :)
Here is the page source
<div class="col-xs-12">
<br />
<div class="panel panel-primary">
<div class="panel-heading">
Collection Info
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active">
<table class="table" >
<tr>
<th>Vendor</th>
<th>Claim Amount</th>
<th>Amount Received</th>
<th>Type</th>
</tr>
<tr>
<th>Date</th>
<th>Rep</th>
<th>Notes</th>
</tr>
<tr>
<td>
Difference in State Check
</td>
<td>
0.00
</td>
<td>
-382.19
</td>
<td>
<select class="form-control" data-val="true" data-val-required="The Value field is required." id="item_Type_Value" name="item.Type.Value">
<option selected="selected" value="c6edd5bc-c5ef-4a56-8db2-17905d98c823">--None--</option>
<option value="0b4a44d0-7241-422d-935b-d0606b9c5ce1">Attn</option>
<option value="a1341e3c-afb7-4c47-8040-d33bdf82493b">$$$</option>
</select>
<p />
<div class="col-xs-12" style="text-align: right;">
<div class="form-group">
<label class="col-xs-5 control-label"></label>
<div class="col-xs-7">
<input type="submit" value=" Update " style="height:35px;width:75px;" />
</div>
</div>
</div>
</td>
<td>
0.00
</td>
<td>
</td>
<td>
999-999-9999
</td>
</tr>
<tr>
<td>
<textarea cols="80" htmlAttributes="{ class = form-control }" id="Notes" name="Notes" rows="6">
</textarea>
</td>
</tr>
</table>
I'm using bootstrap and below is the picture of my page.
My question is: How can I have Vendor, Claim Amount, Amount Received, Type with-in the div of Collection Info?
so I'm rendering this page using two loops
the first loop generates - vendor, claim amount, amount received, type
the second loop generates - date,rep,notes
and the reason my page is messed up is due to my textarea
here is my html page looks like:
<div class="col-xs-12">
<br />
<div class="panel panel-primary">
<div class="panel-heading">
Collection Info
</div>
<br />
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active">
<table class="table" >
<tr>
<th>Vendor</th>
<th>Claim Amount</th>
<th>Amount Received</th>
<th>Type</th>
</tr>
<tr>
<th>Date</th>
<th>Rep</th>
<th>Notes</th>
</tr>
#foreach (var item in Model)
{
<tr><td>#item.vendor</td></tr>
<tr>#item.claimamount</td></tr>
<tr>#item.amountreceived</td></tr>
<tr>#item.type</td></tr>
foreach (var item1 in item.DetailViewModel)
{
<tr>
<td>
#item1.Date
</td>
<td>
#item1.Rep
</td>
<td>
#item1.Notes
</td>
</tr>
}
<tr>
<td>
#Html.TextArea("Notes", "", 6, 80)
</td>
</tr>
}
</table>
</div>
</div>
</div>
</div>
</div>
I'm trying to achieve something like this:
[This solution takes into consideration the generated code from the edit]
As I told you in the comment, just by fixing the different colspan in the table, it already looks a lot better (and closer to what you show in your picture): http://jsfiddle.net/wnqLpsv9/
For example, if the rows have 7 columns, make all the rows have 7 columns (or occupy the space of 7 columns using colspan), or the result will depend on how the browser decides to display the table.
Still, you need to look at the source, because this is a mess of unnecessary <tr> and closing </td> without opening <td>, that won't generate valid code:
#foreach (var item in Model)
{
<tr><td>#item.vendor</td></tr>
<tr>#item.claimamount</td></tr>
<tr>#item.amountreceived</td></tr>
<tr>#item.type</td></tr>
foreach (var item1 in item.DetailViewModel)
{
<tr>
<td>
#item1.Date
</td>
<td>
#item1.Rep
</td>
<td>
#item1.Notes
</td>
</tr>
}
<tr>
<td>
#Html.TextArea("Notes", "", 6, 80)
</td>
</tr>
}
From what you show in the picture, it would need to be something more in this line (and notice that I don't claim this is correct, but more of a guideline on how to fix it):
#foreach (var item in Model)
{
<tr>
<td>#item.vendor</td>
<td>#item.claimamount</td>
<td>#item.amountreceived</td>
<td>#item.type</td>
</tr>
foreach (var item1 in item.DetailViewModel)
{
<tr>
<td>
#item1.Date
</td>
<td>
#item1.Rep
</td>
<td colspan="2">
#item1.Notes
</td>
</tr>
}
<tr>
<td colspan="2"></td>
<td colspan="2">
#Html.TextArea("Notes", "", 6, 80)
</td>
</tr>
}