Question

I'm trying to make a table with a scroll bar. The problem is when I try to make the table scrollable. I know there is a lot of question about that but I don't find the solution to display the table properly. I have always a problem with the columns width.

My html

<table class="contactTable">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Phone</th>
      <th>Fax</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
 <tbody>
   <tr>
     <td>1</td>
     <td>John</td>
     <td>Doe</td>
     <td>xxx-xxx-xxxx</td>
     <td>yyy-yyy-yyyy</td>
     <td>j.doen@hotmail.com</td>
     <td>CEO</td>
   </tr>
 </tbody>
</table>

Here is the CSS:

table.contactTable {
  margin-top: 20px;
  border: 0px solid #1C6EA4;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
table.contactTable td, table.contactTable th {
  border: 1px solid #AAAAAA;
  padding: 6px 2px;
}
table.contactTable tbody td {
  font-size: 13px;
}
table.contactTable tr:nth-child(even) {
  background: #D0E4F5;
}
table.contactTable thead {
  background: #99CCFF;
  background: -moz-linear-gradient(top, #b2d9ff 0%, #a3d1ff 66%, #99CCFF 100%);
  background: -webkit-linear-gradient(top, #b2d9ff 0%, #a3d1ff 66%, #99CCFF 100%);
  background: linear-gradient(to bottom, #b2d9ff 0%, #a3d1ff 66%, #99CCFF 100%);
  border-bottom: 0px solid #444444;
 }

table.contactTable > thead > th {
  font-size: 15px;
  font-weight: bold;
  color: #0F0F0F;
  text-align: center;
  border-left: 0px solid #D0E4F5;
}
table.contactTable thead th:first-child {
  border-left: none;
}

Here is how it looks without the extra css needed to make de table scrollable like overfloy-y display:block

Example Table (No Extra CSS)

here is how it looks when I add " position:absolute; " to my current " table.contactTable > thead > th " and

table.contactTable > tbody {
  overflow-y: scroll;
  height: 100px;
  display: block;
}

Example with the css added

Answer 1

表格和列需要有固定的宽度。

请参阅HTML table with 100% width, with vertical scroll inside tbody“纯CSS解决方案”。

Scrollable Table in HTML does not show properly

1 个答案: