Search code examples
htmlcssstylesalignmentfrontend

Table th and td's not aligning properly


My table is not displaying properly. I usually work in backend, not in frontend, and I don't know how to solve it :(

Table id= #students

Here is my css for that table:

    #students {
                display:table;
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                margin: 0 auto;
                width: 95%;
                table-layout:fixed;
                margin-top: 50px;
                border-collapse: collapse;
            }

            #students tr{
              display:table;
              width:95%;
              table-layout:fixed;
            }

            #students td, #students th {
                border: 1px solid #ddd;
                padding: 8px;
                overflow: hidden;
                text-overflow: ellipsis;
                word-wrap: break-word;
            }

            #students tr:nth-child(even){background-color: #f2f2f2;}

            #students tr:hover {background-color: #ddd;}

            #students th {
              cursor: pointer;
              padding-top: 12px;
              padding-bottom: 12px;
              text-align: left;
              background-color: #F05040;
              color: white;
            }

Solution

  • <!DOCTYPE html>
    <html>
       <head>
          <style>
             #students {
             display:table;
             font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
             margin: 0 auto;
             width: 95%;
             table-layout:fixed;
             margin-top: 50px;
             border-collapse: collapse;
             }
             #students tr{
             display:table;
             width:95%;
             table-layout:fixed;
             }
             #students td, #students th {
             border: 1px solid #ddd;
             padding: 8px;
             overflow: hidden;
             text-overflow: ellipsis;
             word-wrap: break-word;
             }
             #students tr:nth-child(even){background-color: #f2f2f2;}
             #students tr:hover {background-color: #ddd;}
             #students th {
             cursor: pointer;
             padding-top: 12px;
             padding-bottom: 12px;
             text-align: left;
             background-color: #F05040;
             color: white;
             }
          </style>
       </head>
       <body>
          <table id="students">
             <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
             </tr>
             <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
             </tr>
             <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
             </tr>
             <tr>
                <td>John</td>
                <td>Doe</td>
                <td>80</td>
             </tr>
          </table>
          <br>
       </body>
    </html>
    

    Your code is working fine, can you please check the same CSS codes are applying or not.