table CSS

Hi,

In cakephp I am trying to get my tables to look like the below (sample data)
I have embedded my table and what I want the table too look like.
Iin CSS how do i do this look for the table?

  <table cellpadding="0" cellspacing="0" class="table-striped table table-condensed table-hover">
    
   <th>Lesson Date </th>
         <th>Lesson Time </th>
          <th>student name</th>
         <th>Yr</th>
          <th>Subject</th>

   echo '<td>'. $time1 . ' '.$time2 .'</td>';
          
              echo '<td>'.  $studentName .'</td>'; 
              if ($item2['Student']['class_year']==0) { echo   '<td>Prep</td>';}
                  else  { echo   '<td>yr'.$item2['Student']['class_year'].'</td>';}
            
              echo   '<td>'.$item2['Subject']['name'].'</td>';
              
              if ($item2['Lesson']['tutoring_type_id']==2){
                    echo   '<td>Group</td>';
              }
                else  echo   '<td>I</td>';
          
              echo   '<td>'. $hrs.'hr</td>';  

Open in new window

sample2.pngsameple.png
jagguyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
What exactly are you asking? Your table and the one you posted are chalk and cheese - they are related only in the sense they both have rows and columns?

Which part of the second table are you trying to emulate? Your table has text boxes and multiline items so I am assuming it is not the single item per cell that is the requirement.

Your table has lines between rows as does the second.

More info would be useful.
0
lenamtlCommented:
Hi, you may want to use datatable :  http://datatables.net/

There is one package for cakephp:
https://github.com/tigrang/cakephp-datatable
0
jagguyAuthor Commented:
I am simply wanting to have the 1st table look like the 2nd table (forget the input fields as I just want the display).

I am not asking about any field input , just the look of the table rows and columns.
Both examples have a tables so it is the table look I am after from the 2nd example. It isnt hard to see what looks better:)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

jagguyAuthor Commented:
I didnt like the plugin sorry as you are restricted with too many things
0
jagguyAuthor Commented:
I used this and it get close but the font doesnt like quite the same as on the sample.
   table,  th ,td{
    border-bottom: 1px solid lightblue;
     border-bottom: 1px solid blue;
      font-size: .93em; /* 14px/16=0.875em */
      font-family: "Arial", Times, serif;
    font-weight: bold;
    //   color: #666666;
      background-color: lightgreen;
}


tr {
     
    	vertical-align: bottom;
}


th {
    background-color: lightblue;
    
    color: white;
}
.td1{
    
    color: #3399ff
}

Open in new window

0
Julian HansenCommented:
I am not asking about any field input , just the look of the table rows and columns.
Both examples have a tables so it is the table look I am after from the 2nd example. It isnt hard to see what looks better:)
One looks better because it is neater in the layout of its data. The first table has labels and data over multiple rows - hence my original question.

The easiest way to work with this is through a link in the console. If you have a link please post that as it will give us an opportunity to work with active code. Screen shots and code snippets are an inefficient way of dealing with this.
0
lenamtlCommented:
Hi,

 if you want to know the font that is used on the example you like
 just right click and Inspect the element using Chrome this will display the font, plus all the table css
Also check the source code you will be able to see which framework or javascript  is use for the table

You can get inspiration from it.
0
jagguyAuthor Commented:
Here is an example of code I need to change.

http://101.0.99.48/mytestserver/students/stest
0
lenamtlCommented:
Your example use an old Bootstrap version please use the latest version 3 and later.
http://getbootstrap.com/

You are calling Bootstrap and Jquery twice in your code, this is not good and you will have issues
<script type="text/javascript" src="/mytestserver/js/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

Open in new window


You should use <thead> et <tbody> for your table.

If you can update Bootrstrap you will find the old documentation at
http://getbootstrap.com/2.3.2/
0
jagguyAuthor Commented:
I am using cakephp 2.X and it comes with this version of bootstrap.

I wouldnt know where to start by inserting a new version into cakephp.

In the view there is no code to include js/bootstrap so i dont know where it is coming from to remove it.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jagguyAuthor Commented:
sorry this doesnt help as I need to know where the code is being loaded in from. The view dont have this and I have bootstrap.2
0
jagguyAuthor Commented:
ok i found this in layout and some file.
Why do I need this as it seems it  repeat loading the same files?

	<?php
                echo $this->Html->css(array('apt','jquerytablesorterpager'));
                echo $this->Html->script(array('jquery.min','jquery-ui.min'));
				//'themeblue',
	?>
            
			<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
            <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

....

  <script src="//ajax.cdnjs.com/ajax/libs/json2/20110223/json2.min.js"></script>
            <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
            <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
            <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
            <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tab.js"></script>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.