title: How can I make a Table with a Scroll and fixed Header with CSS code, which looks good in any circumstance and on the cellphone too?
body: <p>To use on the multiple tables of my Asp.Net Core Code, I wanted a CSS code/style for my tables, which would make all of them have a scroll but with the table header fixed, making sure that all the rows and columns were aligned with each other. Something that for some reason is difficult to find, because I tried several alternatives, and they all worked very badly for me, since the differents codes which I tested completely misaligned the header with the columns below, or the width of the columns never adjusted well to the width of the text, etc.</p>
  <p>So, after a while, I came up with this style code:</p>
  <pre><code>&lt;style&gt;
      * {
          box-sizing: border-box;
      }
  
      .wrapper2 {
          height: 30vw;
          overflow-y: scroll;
      }
  
      .card {
          background-color: #fff;
          border-radius: 10px;
          margin: 10% auto;
          position: relative;
          padding: 34px;
          color: #444;
          cursor: pointer;
          overflow-x: auto;
      }
  
          .card:before {
              display: block;
              position: absolute;
              background-color: #ccc;
              z-index: -1;
              box-shadow: 0 0 40px #999999;
              transition: box-shadow .2s ease-in-out;
          }
  
          .card.level-3:hover:before {
              box-shadow: 0 0 80px #999999;
          }
  
      .table {
          border-collapse: collapse;
          width: 100%;
      }
  
          .table td {
              overflow: hidden;
              word-break: normal;
              text-align: center;
          }
  
          .table th {
              text-align: center;
              word-break: normal;
          }
  
      .tablealign {
          float: right;
          width: 100%;
          height: 100%;
          border-radius: 3px;
          padding-bottom: 50px;
      }
  
      tbody {
          overflow-y: scroll;
          overflow-x: hidden;
          height: 336px;
          display: block;
      }
  
      thead {
          display: table;
          width: calc(100% - 17px);
          table-layout: fixed;
      }
  
      tbody tr {
          table-layout: fixed;
          display: table;
          width: 100%;
      }
  
      div.c {
          line-height: 1%;
      }
  &lt;/style&gt;
  </code></pre>
  <p>The rest of the code in the View:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;card level-3&quot;&gt;
          &lt;h3&gt;Blablabla&lt;/h3&gt;
  
          &lt;div class=&quot;tablealign&quot;&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;table class=&quot;table table-sm table-bordered&quot;&gt;
                  &lt;thead class=&quot;thead-dark&quot;&gt;
                      &lt;tr&gt;
                          &lt;th&gt;
                              &lt;div&gt;Name of The Person&lt;/div&gt;
                          &lt;/th&gt;
                          &lt;th&gt;
                              &lt;div&gt;Date of The Thing Cre&lt;/div&gt;
                          &lt;/th&gt;
                          &lt;th&gt;
                              &lt;div&gt;Name of The Universe&lt;/div&gt;
                          &lt;/th&gt;
                          &lt;th&gt;
                              &lt;div&gt;A Stuff of 4&lt;/div&gt;
                          &lt;/th&gt;
                          &lt;th&gt;
                              &lt;div&gt;A Stufff Of&lt;/div&gt;
                          &lt;/th&gt;
                          &lt;th&gt;
                              &lt;div&gt;Hour At Create&lt;/div&gt;
                          &lt;/th&gt;
                          &lt;th&gt;
                              &lt;div&gt;Hour At Lifeee&lt;/div&gt;
                          &lt;/th&gt;
                          &lt;th&gt;&lt;div&gt;&lt;/div&gt;&lt;/th&gt;
                          &lt;th&gt;
                              &lt;a class=&quot;btn btn-sm btn-primary&quot; asp-action=&quot;Filtro&quot; asp-route-id=&quot;&quot;&gt;
                                  SEARCH
                              &lt;/a&gt;
                          &lt;/th&gt;
                          &lt;th&gt;&lt;div&gt;&lt;/div&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      @foreach (var item in ViewBag.Modelito)
                      {
                      &lt;tr&gt;
                          &lt;td&gt;
                              @item.Nom
                          &lt;/td&gt;
                          &lt;td&gt;
                              @item.Fech
                          &lt;/td&gt;
                          &lt;td&gt;
                              @item.NombM
                          &lt;/td&gt;
                          &lt;td&gt;
                              @item.Momo
                          &lt;/td&gt;
                          &lt;td&gt;
                              @item.RA
                          &lt;/td&gt;
                          &lt;td&gt;
                              @item.Ho
                          &lt;/td&gt;
                          &lt;td&gt;
                              @item.HourF
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;a class=&quot;btn btn-sm btn-primary&quot; asp-action=&quot;Edit&quot; asp-route-id=&quot;@item.Id&quot;&gt;
                                  EDIT
                              &lt;/a&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;a class=&quot;btn btn-sm btn-primary&quot; asp-action=&quot;Details&quot; asp-route-id=&quot;@item.Id&quot;&gt;
                                  DETAILS
                              &lt;/a&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;a class=&quot;btn btn-sm btn-danger&quot; asp-action=&quot;Delete&quot; asp-route-id=&quot;@item.Id&quot;&gt;
                                  DELETEthis
                              &lt;/a&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      }
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And all this code on the website looks like this:
  <a href="https://i.stack.imgur.com/uoSZ5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uoSZ5.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/boAK3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/boAK3.png" alt="enter image description here" /></a></p>
  <p>Which works just fine, not bad but I would like the width of the header and column text to fit better, in the way you know...the way a tbody normally does with the td/th when It's just a normal table and the text adjusts visually nicely, but then when you ask this thing to have a scroll that doesn't move the head, the CSS code seems to completely lose its mind for reasons outside of my compression.</p>
  <p>However, beyond improving this detail, my code generates the following gigantic problem, and that is, the View looks like this on a cellphone...:</p>
  <p><a href="https://i.stack.imgur.com/DmDyT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DmDyT.png" alt="enter image description here" /></a></p>
  <p>Yes, this looks pretty bad.</p>
  <p>How can I improve my code, get the table I really want, and also make it look good on a cellphone?? Thanks in advance for reading, I really need help with this.</p>