I cannot apply CSS in html table

Question

I cannot apply the CSS in the table. For example I want the table to be displayed in the middle and to change the font color and size as well. But I can't. Should I use the tbody tag since I have the body one? Also I generate the table data from database.

    <?php 

      include 'connect.php';

      $year = $_POST['year']; 
      $lecturer = $_POST['lecturer']; 
      $years     = array(
          2005,
          2006,
          2007
      );
     $lecturers = array(
         'lec1',
         'lec2',
         'lec3',
         'lec4'
      );

    if (in_array($lecturer, $lecturers) && in_array($year, $years)) {

           $sql = "SELECT unit_name,a1,a2,a3,l1,l2,r1,r2,u1,u2,u3 FROM $lecturer WHERE year=$year";

           $result = mysql_query($sql);
     }

    else {
         echo "No data found";
    }
?>
     <html>   
      <head>
    <link rel="stylesheet" type="text/css" href="../../statistics/style.css">
      </head>
       <body>
         <div id="mytable">
           <table width="900" border="1" cellspacing="1">
               <tr>
                 <tbody>
                  <td>Unit Name</td>
                  <td>A1 </td>
                  <td>A2 </td>
                  <td>A3 </td>
                  <td>L1 </td>
                  <td>L2 </td>
                  <td>R1 </td>
                  <td>R2 </td>
                  <td>U1 </td>
                  <td>U2 </td>
                  <td>U3 </td>
        </tbody>
      </tr>

  <?php
       while($unit=mysql_fetch_assoc($result)){
        echo "<tr>";
        echo "<td>".$unit['unit_name']."</td>";
        echo "<td>".$unit['a1']."</td>";
        echo "<td>".$unit['a2']."</td>";
        echo "<td>".$unit['a3']."</td>";
        echo "<td>".$unit['l1']."</td>";
        echo "<td>".$unit['l2']."</td>";
        echo "<td>".$unit['r1']."</td>";
        echo "<td>".$unit['r2']."</td>";
        echo "<td>".$unit['u1']."</td>";
        echo "<td>".$unit['u2']."</td>";
        echo "<td>".$unit['u3']."</td>";
        echo "</tr>";    
       }
   ?>
   </table>
   </div>
  </body>
  </html>


css:


      <!-- principalLecturers
     -->
      #body{
        color:white;
        padding-bottom: 20px;
       }
      #table{
        margin:0;
        border-collapse: collapse;
        color:#b50a1e;
        font-family:verdana,arial,sans-serif;
        font-size:10px;
       }  
       #table#mytable{
         display: table-row-group;
         vertical-align: middle;
         border-color: inherit
       }

The correct hierarchy is table -> tbody -> tr -> th/td, You've got tr and tbody reversed. Also, #body and #table are looking for elements with the id's body and table. If you want to match an element type, remove the # in CSS. — GolezTrol
– GolezTrol, Commented Apr 10, 2015 at 8:32
#table#mytable - wow... This one just cannot work by definiton: element cannot have two ids at once — smnbbrv
– smnbbrv, Commented Apr 10, 2015 at 8:33
You don't seem to understand CSS selectors quite right. See Type selectors, ID selectors. — maryisdead
– maryisdead, Commented Apr 10, 2015 at 8:36

Marin Takanov · Accepted Answer · 2015-04-10 08:31:58Z

1

I can't see anywhere in your table <table id="table"...>. That's why the styles for #table {...} does not apply.

answered Apr 10, 2015 at 8:31

Marin Takanov

1,1484 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

I cannot apply CSS in html table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related