Блог

Главная - Вопросы по программированию - th и td не получают одинаковой ширины

th и td не получают одинаковой ширины

#javascript #html #css

Вопрос:

Я не могу сопоставить ширину td и th и получить зазор между таблицей и полосой прокрутки.

 .table_fixed tbody {
  display: block;
  height: 500px;
  overflow-y: scroll;
}
.table_fixed thead {
  display: block;
}

Пожалуйста, ознакомьтесь с приведенным ниже jsfiddle, чтобы просмотреть весь код:

https://jsfiddle.net/w80bz1vc/

Ответ №1:

Там было несколько ненужных css, которые я удалил,

Эти два правила конкретно,

 .table_fixed tbody {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

.table_fixed thead {
  display: block;
  float: inline-end;
}

Как правило, старайтесь по возможности не изменять display свойства элементов таблицы по умолчанию.

 body {
  background-image: url("https://img.collegedekhocdn.com/media/img/institute/crawled_images/10450_gogte_new.jpg?tr=w-250,h-150");
  background-repeat: round;
  background-attachment: fixed;
  background-size: cover;
}
#logo {
  position: fixed;
  top: 0;
  left: 0;
}
table {
  font-family: arial, sans-serif;
  width: 70%;
  margin: 0 auto;
  border: 1px solid;
}

td,
th {
  border: 1px solid black;
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f3e5f5;
}
tr:nth-child(odd) {
  background-color: #fff;
}

h2 {
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  margin: 1rem;
}
.pink-bg {
  background-color: #f3e5f5;
}
#admin-login-id {
  justify-content: flex;
  position: absolute;
  right: 45%;
  align-content: center;
}
.loader {
  position: absolute;
  bottom: 50%;
  right: 50%;
}

.admin_button {
  text-align: center;
}
.add_button {
  text-align: center;
  display: none;
}
.title_class {
  display: none;
}

.add2_button {
  display: none;
  text-align: center;
}
.disable-delete {
  cursor: pointer;
  color: gray;
}
.active-delete {
  cursor: pointer;
  /*   add external cursor */
  color: Black;
  background-color: red;
} 
 <table class="tab_id table_fixed" style="">
  <!--Spinner -->

  <thead>
    <tr class="th purple lighten-2">
      <th class="sem_count" colspan="2">BCA I Sem</th>
      <th class="sem_count" colspan="2">BCA II Sem</th>
      <th class="sem_count" colspan="2">BCA III Sem</th>
      <th class="remove_col"></th>
    </tr>
    <tr class="purple lighten-4">
      <th>Subject</th>
      <th>Professor</th>
      <th>Subject</th>
      <th>Professor</th>
      <th>Subject</th>
      <th>Professor</th>
      <th>Remove</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="Mathematics_class">Mathematics</td>
      <td>Sharma Sir</td>
      <td class="Mathematics_class">Mathematics</td>
      <td>Sharma Sir</td>
      <td class="Mathematics_class">Mathematics</td>
      <td>Sharma Sir</td>
      <td><i onclick="deleteSubject('Mathematics')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
    </tr>
    <tr>
      <td class="English_class">English</td>
      <td>Gouri Mam</td>
      <td class="English_class">English</td>
      <td>Gouri Mam</td>
      <td class="English_class">English</td>
      <td>Gouri Mam</td>
      <td><i onclick="deleteSubject('English')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
    </tr>
    <tr>
      <td class="Sanskrit_class">Sanskrit</td>
      <td>Virat Sir</td>
      <td class="Sanskrit_class">Sanskrit</td>
      <td>Virat Sir</td>
      <td class="Sanskrit_class">Sanskrit</td>
      <td>Virat Sir</td>
      <td><i onclick="deleteSubject('Sanskrit')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
    </tr>
    <tr>
      <td class="Science_class">Science</td>
      <td>Shivani Mam</td>
      <td class="Science_class">Science</td>
      <td>Shivani Mam</td>
      <td class="Science_class">Science</td>
      <td>Shivani Mam</td>
      <td><i onclick="deleteSubject('Science')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
    </tr>
    <tr>
      <td class="Electronics_class">Electronics</td>
      <td>Shishir Sir</td>
      <td class="Electronics_class">Electronics</td>
      <td>Shishir Sir</td>
      <td class="Electronics_class">Electronics</td>
      <td>Shishir Sir</td>
      <td><i onclick="deleteSubject('Electronics')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
    </tr>
    <tr>
      <td class="Testing_class">Testing</td>
      <td>Vaishali Mam</td>
      <td class="Testing_class">Testing</td>
      <td>Vaishali Mam</td>
      <td class="Testing_class">Testing</td>
      <td>Vaishali Mam</td>
      <td><i onclick="deleteSubject('Testing')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
    </tr>
    <tr>
      <td class="Chemestry_class">Chemestry</td>
      <td>Subbu Sir</td>
      <td class="Chemestry_class">Chemestry</td>
      <td>Subbu Sir</td>
      <td class="Chemestry_class">Chemestry</td>
      <td>Subbu Sir</td>
      <td><i onclick="deleteSubject('Chemestry')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
    </tr>
    <tr>
      <td class="Hindi_class">Hindi</td>
      <td>Jadu sir</td>
      <td class="Hindi_class">Hindi</td>
      <td>Jadu sir</td>
      <td class="Hindi_class">Hindi</td>
      <td>Jadu sir</td>
      <td><i onclick="deleteSubject('Hindi')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
    </tr>
    <tr>
      <td class="A_class">A</td>
      <td>ASD</td>
      <td class="A_class">A</td>
      <td>ASD</td>
      <td class="A_class">A</td>
      <td>ASD</td>
      <td><i onclick="deleteSubject('A')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
    </tr>
    <tr>
      <td class="R_class">R</td>
      <td>FGH</td>
      <td class="R_class">R</td>
      <td>FGH</td>
      <td class="R_class">R</td>
      <td>FGH</td>
      <td><i onclick="deleteSubject('R')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
    </tr>
    <tr>
      <td class="Physics_class">Physics</td>
      <td>Ramesh</td>
      <td class="Physics_class">Physics</td>
      <td>Ramesh</td>
      <td class="Physics_class">Physics</td>
      <td>Ramesh</td>
      <td><i onclick="deleteSubject('Physics')" class="material-icons disable-delete" style="background-color: red; color: black;">delete</i></td>
    </tr>
  </tbody>

</table>

Комментарии:

1. Я также хочу, чтобы полоса прокрутки была только в теле. Так что CSS был добавлен.

2. Я также хочу, чтобы полоса прокрутки была только в теле. Это невозможно. Тем не менее, вы можете использовать position: fixed; ячейки заголовка, но для этого требуется много хакерских исправлений.

Метки: