web-dev-qa-db-fra.com

Bootstrap4 Responsive Table - Correction de la première colonne

Je crée un tableau de planification avec des événements et des heures, je dois donc corriger la première colonne lorsque le tableau défile horizontalement. Cela aidera les utilisateurs à voir plus facilement l'heure de l'événement. J'utilise Bootstrap 4. Capture d'écran du tableau: http://prntscr.com/japkbc .

Meilleures salutations

javascriptjqueryhtmlcssbootstrap-4
8
GhoSTBG

Je n'ai pas compris ce que cela signifiait exactement, d'après ce que j'ai compris, j'ai essayé de corriger votre première ligne lors du défilement horizontal. Si vous n'avez pas trouvé votre solution ou si ma solution n'est pas ce que vous attendez, commentez. Je vais essayer de t'aider.

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
th
{
background-color:black;
color:white;
}
th:first-child, td:first-child
{
  position:sticky;
  left:0px;
 
}
 td:first-child
 {
  background-color:grey;
 }
<table>
  <tr>
     <th>TIME</th>
    <th>Company</th>
    <th>Company</th>
    <th>Company</th>
    <th>Company</th>
    <th>Company</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>11:40   </td>
    <td>Maria Anders</td>
     <td>Alfreds Futterkiste</td> 
    <td>Maria Anders</td>
     <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>11:40   </td>
     <td>Maria Anders</td>
     <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
     <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>11:40   </td>
     <td>Maria Anders</td>
     <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
     <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
   <td>11:40   </td>
     <td>Maria Anders</td>
     <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
     <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>11:40   </td>
     <td>Maria Anders</td>
     <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
     <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>11:40   </td>
     <td>Maria Anders</td>
     <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
     <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
18
Aayushi Kambariya