9 Replies - 386 Views - Last Post: 12 January 2018 - 07:23 AM

#1 tedchong  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 31-December 17

How to coding to make the table equal?

Posted 11 January 2018 - 12:38 AM

The table is not equal, after i keyed in the contend. I spend half afternoon also can't solve this problem. Thanks for your knowledge!
HTML File
<section id="service" class="service">
<div class="container">
				<div class="row">
				
					<div class="head_title text-center">
						<h2>PRICING TABLE</h2>
						<div class="separetor"></div>
						<p>The pricing rate is based on hourly and grade basis,the pricing table below showing the starting rate per hour. </p>
					</div>
					<div class="pricing_content_area choose_pricing_content_area text-center">
					
					    <div class="col-md-3 col-sm-6 col-xs-12">
							<div class="choose_single_pricing_text proffetional_price">
								<h3>Kidnergarden / Primary School</h3>
								<div class="choose_pricing_text">
									<p>Kidnergarden,Preschool</p>
									<p>Standard 1-Standard 6</p>
									<p class="price">Kidnergarden & UPSR</p>
									<ul>
										<li>Kidnergarden   From RM25</li>
										<li>Standard 1-3   From RM30</li>
										<li>Standard 4-6   From RM35</li>
									</ul>
									<a href="" class="btn btn-lg">Search Tutor</a>
								</div>
							</div>
						</div>
						
					    <div class="col-md-3 col-sm-6 col-xs-12">
							<div class="choose_single_pricing_text proffetional_price">
								<h3 class="Space">Secondary School</h3>
								<div class="choose_pricing_text">
									<p>Form 1 - Form 3</p>
									<p>Form 4 - Form 6</p>
									<p class="price">PT3 SPM STPM</p>
									<ul>
										<li>Form 1-3   From RM35</li>
										<li>Form 4-5   From RM40</li>
										<li>Form 6     From RM50</li>
									    <li></li>
									    <li></li>
									</ul>
									<a href="" class="btn btn-lg">Search Tutor</a>
								</div>
							</div>
						</div>
						
					    <div class="col-md-3 col-sm-6 col-xs-12">
							<div class="choose_single_pricing_text proffetional_price">
								<h3 class="Space">College and University</h3>
								<div class="choose_pricing_text">
										
									<p>A Level, Pre-U</p>
									<p>Diploma, Degree</p>
									<p class="price">Pre-U Diploma & Degree</p>
									
									<ul>
										<li>A Level   From RM60</li>
										<li>Pre U     From RM60</li>
										<li>Diploma   From RM70</li>
										<li>Degree    From RM80</li>									
									</ul>
									
									<a href="" class="btn btn-lg">Search Tutor</a>
								</div>
							</div>
						</div>
					    <div class="col-md-3 col-sm-6 col-xs-12">
							<div class="choose_single_pricing_text proffetional_price">
								<h3 class="Space">Languages and Others</h3>
								<div class="choose_pricing_text">
									<p>English & Chinese Conversation</p>
									<p>Art & Music</p>
									<p class="price">Languages & Others</p>
									<ul>
										<li>Languages   From RM50</li>
										<li>Programming From RM60</li>
										<li>Art/Music     From RM40</li>
										<li>Piano         From RM100</li>
									</ul>
									<a href="" class="btn btn-lg">Search Tutor</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section><!-- End of choose Pricing Section -->


CSS File

.service{
	overflow:hidden;
	padding: 80px 0px 0px 0px;
        margin-bottom: 80px;

.choose_single_pricing_text{
	text-align:center;
	margin-top:50px;
        margin-bottom:20px
}
.proffetional_price{
	box-shadow:0px 3px 13px 2px rgba(0, 0, 0, 0.1);
}
.choose_single_pricing_text h3{
    background: #e84c3d;
    color: #fff;
    margin: 0;
    padding: 10px 10px;
}
.choose_single_pricing_text h3.Space{
    background: #e84c3d;
    color: #fff;
    margin: 0;
    padding: 10px 10px;
    padding-bottom: 40px;
}
.choose_pricing_text{
	padding:20px 20px;
}
.choose_pricing_text p.price{
	font-size:30px;
	font-weight:500;
	color:#e84c3d;
	margin-top:30px;
	text-transform:uppercase;
}
.choose_pricing_text p span{
	color:#666;
	font-size:14px;
	font-weight:300;
}

.choose_pricing_text ul li{
	line-height: 45px;
    border-bottom: 1px solid #ddd;
    height: 45px;
}
.choose_pricing_text a{
	margin-top:30px;
}

This post has been edited by andrewsw: 11 January 2018 - 02:34 AM
Reason for edit:: added missing [code][/code] tags, learn to do this for yourself


Is This A Good Question/Topic? 0
  • +

Replies To: How to coding to make the table equal?

#2 tedchong  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 31-December 17

Re: How to coding to make the table equal?

Posted 11 January 2018 - 01:05 AM

I tried b4 to put a class to <ul class="Space"> and put css with padding-bottom = xxpx. It did show equal in my dekstop but it is not showing equal bottom on my mobile phone. I thought this is not the correct manner to code, i hope i can know the proper way to enhance my skill.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • blow up my boots
  • member icon

Reputation: 6450
  • View blog
  • Posts: 26,093
  • Joined: 12-December 12

Re: How to coding to make the table equal?

Posted 11 January 2018 - 02:39 AM

Put your code in code tags. It shows how to do this directly in the area where you type your post. Highlight your code and click the CODE button.

I'll do it for you this time.

What is YOUR definition of an "equal table"? Please provide a clear question.




(Please also mention when posting that you are using Bootstrap.)

One further point is that you do not have a table in your posted code.
Was This Post Helpful? 1
  • +
  • -

#4 tedchong  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 31-December 17

Re: How to coding to make the table equal?

Posted 11 January 2018 - 08:19 PM

1.Please refer the pricing table from my website wwww.tedchong.com , actually my meaning is how to amend the css to make the bottom
of the pricing table to be looked equal in my dekstop and mobile phone. Because the content of these 4 pricing table is different, therefore the bottom of these 4 pricing table is not equal.
2. Another issue is these 4 pricing table is not arrange in proper way while i open the website on my mobile phone.
Thank you.




<section id="service" class="service">
	<div class="container">
		<div class="row">
		//!--Introduction of the Pricing table--// 		
		<div class="head_title text-center wow slideInDown" data-wow-duration="0.3s">
		<h2>PRICING TABLE</h2>
		<div class="separetor"></div>
	<p>The pricing rate is based on hourly and grade basis,the pricing table below showing the starting rate per hour. </p>
	</div>
	<div class="pricing_content_area choose_pricing_content_area text-center">

	//!--First Table--//				
        <div class="col-md-3 col-sm-6 col-xs-12">
	<div class="choose_single_pricing_text proffetional_price wow fadeIn" data-wow-duration="1s">
	<h3>Kidnergarden / Primary School</h3>
	<div class="choose_pricing_text">
	<p>Kidnergarden,Preschool</p>
	<p>Standard 1-Standard 6</p>
	<p class="price">UPSR</p>
	<ul class="Space2">
	<li>Kidnergarden   From RM25</li>
	<li>Standard 1-3   From RM25</li>
	<li>Standard 4-6   From RM30</li>										
	</ul>
	<a href="" class="btn btn-lg">Search Tutor</a>
	</div>
	</div>
	</div>

	 //!--Second Table--//					
	<div class="col-md-3 col-sm-6 col-xs-12">
	<div class="choose_single_pricing_text proffetional_price wow fadeIn" data-wow-duration="1.5s">
	<h3 class="Space">Secondary School</h3>
	<div class="choose_pricing_text">
	<p>Form 1 - Form 3</p>
	<p>Form 4 - Form 6</p>
	<p class="price">PT3 SPM STPM</p>
	<ul class="Space3">
	<li>Form 1-3   From RM35</li>
	<li>Form 4-5   From RM40</li>
	<li>Form 6     From RM50</li>										
	</ul>
	<a href="" class="btn btn-lg">Search Tutor</a>
	</div>
	</div>
	</div>
			
	//!--Third Table--//		
	<div class="col-md-3 col-sm-6 col-xs-12">
	<div class="choose_single_pricing_text proffetional_price wow fadeIn" data-wow-duration="2s">
	<h3 class="Space">College and University</h3>
	<div class="choose_pricing_text">
										
	<p>A Level, Pre-U</p>
	<p>Diploma, Degree</p>
	<p class="price">Pre-U Diploma & Degree</p>
									
	<ul>
	<li>A Level   From RM60</li>
	<li>Pre U     From RM60</li>
	<li>Diploma   From RM70</li>
	<li>Degree    From RM80</li>									
	</ul>
									
	<a href="" class="btn btn-lg">Search Tutor</a>
	</div>
	</div>
	</div>

        //!--Fourth Table--//
	<div class="col-md-3 col-sm-6 col-xs-12">
	<div class="choose_single_pricing_text proffetional_price wow fadeIn" data-wow-duration="1.5s">
	<h3 class="Space">Languages and Others</h3>
	<div class="choose_pricing_text">
	<p>English Conversation, Chinese Conversation</p>
	<p>Programming, Art & Music Class</p>
	<p class="price">Languages & Others</p>
	<ul>
	<li>Languages   From RM50</li>
	<li>Programming From RM80</li>
	<li>Art/Music     From RM40</li>
	<li>Piano         From RM100</li>
	</ul>
	<a href="" class="btn btn-lg">Search Tutor</a>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section><!-- End of choose Pricing Section -->




CSS File
.service{
	overflow:hidden;
	padding: 80px 0px 0px 0px;
        margin-bottom: 80px;
}
.choose_single_pricing_text{
	text-align:center;
	margin-top:50px;
        margin-bottom:50px
}
.proffetional_price{
	box-shadow:0px 3px 13px 2px rgba(0, 0, 0, 0.1);
}
.choose_single_pricing_text h3{
    background: #e84c3d;
    color: #fff;
    margin: 0;
    padding: 10px 10px;
}
.choose_single_pricing_text h3.Space{
    background: #e84c3d;
    color: #fff;
    margin: 0;
    padding: 10px 10px;
    padding-bottom: 40px;
}
.choose_pricing_text{
	padding:20px 40px;
}
.choose_pricing_text p.price{
	font-size:30px;
	font-weight:500;
	color:#e84c3d;
	margin-top:30px;
	text-transform:uppercase;
}
.choose_pricing_text p span{
	color:#666;
	font-size:14px;
	font-weight:300;
}

.choose_pricing_text ul li{
	line-height: 45px;
    border-bottom: 1px solid #ddd;
    height: 45px;

}
.choose_pricing_text a{
	margin-top:30px;
}



Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • blow up my boots
  • member icon

Reputation: 6450
  • View blog
  • Posts: 26,093
  • Joined: 12-December 12

Re: How to coding to make the table equal?

Posted 12 January 2018 - 12:37 AM

This might be useful

Bootstrap equal-height columns experiment

I would check, though, whether a recent version of Bootstrap already has this feature.
Was This Post Helpful? 1
  • +
  • -

#6 doodleblueus  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-January 18

Re: How to coding to make the table equal?

Posted 12 January 2018 - 04:55 AM

Hello!
This is the easy way for making the table equal.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
height: 400px;
width: 400px;
margin: 0; padding: 0;
border-collapse: collapse;
}
td {
border: 1px solid #CC3;
border-spacing: 0;
height: 100px;
width: 100px;
margin: 0; padding: 0;
}
</style>
</head>

<body>
<table>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>

For more information refer this Custom Web Application Development
Was This Post Helpful? 0
  • +
  • -

#7 doodleblueus  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-January 18

Re: How to coding to make the table equal?

Posted 12 January 2018 - 05:05 AM

Hello!
This is the easy way for making the table equal.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
height: 400px;
width: 400px;
margin: 0; padding: 0;
border-collapse: collapse;
}
td {
border: 1px solid #CC3;
border-spacing: 0;
height: 100px;
width: 100px;
margin: 0; padding: 0;
}
</style>
</head>

<body>
<table>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>

For more information refer this Custom Web Application Development

Hello!
This is the easy way for making the table equal.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
height: 400px;
width: 400px;
margin: 0; padding: 0;
border-collapse: collapse;
}
td {
border: 1px solid #CC3;
border-spacing: 0;
height: 100px;
width: 100px;
margin: 0; padding: 0;
}
</style>
</head>

<body>
<table>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>

For more information refer this Custom Web Application Development
Was This Post Helpful? 0
  • +
  • -

#8 tedchong  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 31-December 17

Re: How to coding to make the table equal?

Posted 12 January 2018 - 06:51 AM

I put the <div class="row row-eq-height"></div> in my html file, but the table height also not equal. Can anybody tell me anything
wrong in my coding with the solution.Thanks
I open my index.html in Chrome browser.


<section id="service" class="service">
	<div class="container">
				
				
	<div class="head_title text-center">
	<h2>PRICING TABLE</h2>
	<div class="separetor"></div>
	<p>The pricing rate is based on hourly and grade basis,the pricing table below showing the starting rate per hour. </p>
	</div>
					
        <div class="row row-eq-height">
        <div class="col-md-3 col-sm-6 col-xs-12">
	<div class="choose_single_pricing_text proffetional_price">
	<h3>Kidnergarden / Primary School</h3>
	<div class="choose_pricing_text">
	<p>Kidnergarden,Preschool</p>
	<p>Standard 1-Standard 6</p>
	<p class="price">Kidnergarden & UPSR</p>
	<ul>
	<li>Kidnergarden   From RMxx</li>
	<li>Standard 1-3   From RMxx</li>
	<li>Standard 4-6   From RMxx</li>
	</ul>
	<a href="" class="btn btn-lg">Hello</a>
	</div>
							
	</div>
	</div>
						
	<div class="col-md-3 col-sm-6 col-xs-12">
	<div class="choose_single_pricing_text proffetional_price">
	<h3 class="Space">Secondary School</h3>
	<div class="choose_pricing_text">
	<p>Form 1 - Form 3</p>
	<p>Form 4 - Form 6</p>
	<p class="price">PT3 SPM STPM</p>
	<ul>
	<li>Form 1-3   From RMxx</li>
	<li>Form 4-5   From RMxx</li>
	<li>Form 6     From RMxx</li>
	</ul>
	<a href="" class="btn btn-lg">Search</a>
	</div>
	</div>
	</div>
						
	<div class="col-md-3 col-sm-6 col-xs-12">
	<div class="choose_single_pricing_text proffetional_price">
	<h3 class="Space">College and University</h3>
	<div class="choose_pricing_text">
										
	<p>A Level, Pre-U</p>
	<p>Diploma, Degree</p>
	<p class="price">Pre-U Diploma & Degree</p>
									
	<ul>
	<li>A Level   From RMxx</li>
	<li>Pre U     From RMxx</li>
	<li>Diploma   From RMxx</li>
	<li>Degree    From RMxx</li>									
	</ul>
									
	<a href="" class="btn btn-lg">Search</a>
	</div>
	</div>
	</div>
	<div class="col-md-3 col-sm-6 col-xs-12">
	<div class="choose_single_pricing_text proffetional_price">
	<h3 class="Space">Languages and Others</h3>
	<div class="choose_pricing_text">
	<p>English & Chinese Conversation</p>
	<p>Art & Music</p>
	<p class="price">Languages & Others</p>
	<ul>
	<li>Languages   From RMxx</li>
	<li>Programming From RMxx</li>
	<li>Art/Music     From RMxx</li>
	<li>Piano         From RMxxx</li>
	</ul>
	<a href="" class="btn btn-lg">Search</a>
	</div>
        </div>
	</div>
	</div>
        </div>
				
        </div>
		</section><!-- End of choose Pricing Section -->



Css.File
/* Pricing Section */

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

.choose_single_pricing_text{
	text-align:center;
	margin-top:50px;
        margin-bottom:20px
}
.proffetional_price{
	box-shadow:0px 3px 13px 2px rgba(0, 0, 0, 0.1);
}
.choose_single_pricing_text h3{
    background: #e84c3d;
    color: #fff;
    margin: 0;
   padding: 10px 10px;
}
.choose_single_pricing_text .Space{
    background: #e84c3d;
    color: #fff;
    margin: 0;
    padding: 10px 10px;
    padding-bottom: 40px;
}
.choose_pricing_text{
	padding:20px 20px;
}
.choose_pricing_text p.price{
	font-size:30px;
	font-weight:500;
	color:#e84c3d;
	margin-top:30px;
	text-transform:uppercase;
}
.choose_pricing_text p span{
	color:#666;
	font-size:14px;
	font-weight:300;
}

.choose_pricing_text ul li{
	line-height: 45px;
    border-bottom: 1px solid #ddd;
    height: 45px;
}
.choose_pricing_text a{
	margin-top:30px;
}



Was This Post Helpful? 0
  • +
  • -

#9 tedchong  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 31-December 17

Re: How to coding to make the table equal?

Posted 12 January 2018 - 07:03 AM

Thanks, Andrewsw and doodleblueus for your reply.
I put the <div row row-eq-height>, but the problem still doesn't solve. Any idea?
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is online

  • blow up my boots
  • member icon

Reputation: 6450
  • View blog
  • Posts: 26,093
  • Joined: 12-December 12

Re: How to coding to make the table equal?

Posted 12 January 2018 - 07:23 AM

You need to put those four red blocks in their own row with .row-eq-height. That is, in their own row without the full-width content/text above them.

The first red block should not be nested in the div "pricing_content_area text-center".

The four red blocks will then have equal height, but you won't notice this because they each contain an inner div "choose_single_pricing_text proffetional_price" which is not extending to the full height of their containing columns. You need to give these divs height: 100% (or remove them).
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1