Ann Ann - 7 months ago 12
HTML Question

CSS Change td size

I am trying to create a nice looking table. I found a template and I want to modify it. The problem is that if I want to modify the font size of the top headers, the ones inside "

head_nav
" like this :
#head_nav th{ font-size: 30px;}
nothing happens. Am I doing something wrong? Also I want to make the data "TD" a square size, not rectangle, so I tried this:
tr, td{ width: 100%; height:100%;}
but again nothing happens.

This is my code :



<!doctype html>
<html>
<head>
<title>Timetable</title>
<style type="text/css">
body
{
font-family: arial;
}

th,td
{
margin: 0;
text-align: center;
border-collapse: collapse;
outline: 1px solid #e3e3e3;
}

td
{
padding: 5px 10px;
}

th
{
background: #666;
color: white;
padding: 5px 10px;
}

td:hover
{
cursor: pointer;
background: #666;
color: white;
}
</style>

</head>

<body>
<table width="80%" align="center" >
<div id="head_nav">
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thrusday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</div>

<tr>
<th>10:00 - 11:00</th>

<td>Physics-1</td>
<td>English</td>
<td title="No Class" class="Holiday"></td>
<td>Chemestry-1</td>
<td>Alzebra</td>
<td>Physical</td>
</div>
</tr>

<tr>
<th>11:00 - 12:00</td>

<td>Math-2</td>
<td>Chemestry-2</td>
<td>Physics-1</td>
<td>Hindi</td>
<td>English</td>
<td>Soft Skill</td>
</div>
</tr>

<tr>
<th>12:00 - 01:00</td>

<td>Hindi</td>
<td>English</td>
<td>Math-1</td>
<td>Chemistry</td>
<td>Physics</td>
<td>Chem.Lab</td>

</div>
</tr>

<tr>
<th>01:00 - 02:00</td>

<td>Cumm. Skill</td>
<td>Sports</td>
<td>English</td>
<td>Computer Lab</td>
<td>Header</td>
<td>Header</td>

</div>
</tr>

<tr>
<th>02:00 - 03:00</td>

<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</div>
</tr>
</table>
</body>




Answer

Your code is invalid, try this.

 table tr:first-of-type 

Don't insert table elements in divs, either use specific selectors, or give classes/id's to your td/tr's.

As you've also been told, inline CSS is a bad practice, so move it in a separate CSS file.

  body {
      font-family: arial;
  }
  th, td {
      margin: 0;
      text-align: center;
      border-collapse: collapse;
      outline: 1px solid #e3e3e3;
  }
  td {
      padding: 5px 10px;
  }
  th {
      background: #666;
      color: white;
      padding: 5px 10px;
  }
  td:hover {
      cursor: pointer;
      background: #666;
      color: white;
  }
  table tr:first-of-type {
      font-size:30px;
  }
<title>Timetable</title>
<table width="80%" align="center">
    <tr>
        <th>Time</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thrusday</th>
        <th>Friday</th>
        <th>Saturday</th>
    </tr>
    <tr>
        <th>10:00 - 11:00</th>
        <td>Physics-1</td>
        <td>English</td>
        <td title="No Class" class="Holiday"></td>
        <td>Chemestry-1</td>
        <td>Alzebra</td>
        <td>Physical</td>
        </div>
    </tr>
    <tr>
        <th>11:00 - 12:00</td>
            <td>Math-2</td>
            <td>Chemestry-2</td>
            <td>Physics-1</td>
            <td>Hindi</td>
            <td>English</td>
            <td>Soft Skill</td>
            </div>
    </tr>
    <tr>
        <th>12:00 - 01:00</td>
            <td>Hindi</td>
            <td>English</td>
            <td>Math-1</td>
            <td>Chemistry</td>
            <td>Physics</td>
            <td>Chem.Lab</td>
            </div>
    </tr>
    <tr>
        <th>01:00 - 02:00</td>
            <td>Cumm. Skill</td>
            <td>Sports</td>
            <td>English</td>
            <td>Computer Lab</td>
            <td>Header</td>
            <td>Header</td>
            </div>
    </tr>
    <tr>
        <th>02:00 - 03:00</td>
            <td>Header</td>
            <td>Header</td>
            <td>Header</td>
            <td>Header</td>
            <td>Header</td>
            <td>Header</td>
            </div>
    </tr>
</table>