Таблица th и td не выравнивается должным образом - PullRequest
Новая
       20

Таблица th и td не выравнивается должным образом

0 голосов
/ 27 апреля 2020

Моя таблица не отображается должным образом. Я обычно работаю в бэкэнде, а не во внешнем интерфейсе, и я не знаю, как его решить: (

Идентификатор таблицы = #students

Вот мой css для этой таблицы: 

    #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;
            }

1 Ответ

0 голосов
/ 27 апреля 2020 
<!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>

Ваш код работает нормально, пожалуйста, проверьте те же CSS коды применяются или нет.

...