0

I changed the thead and tbody of my table to display block so that I could have the header frozen and the tbody scrollable. that part worked fine but now I can get the the columns and the headers to line up like a table normally behaves?

How can I sync up the columns without using fixed widths? I want the website to be responsive so I don't know fixed widths for the columns

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr minmax(350px, auto);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "h h" "l d" "f f";
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

#header {
  grid-area: h;
  background-color: lightsteelblue;
}

#list {
  grid-area: l;
  width: 100%;
  height: 100%;
}

#detail {
  grid-area: d;
  background-color: lightsteelblue;
}

#footer {
  grid-area: f;
  background-color: lightsteelblue;
}

table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

thead {
  display: block;
  width: 100%;
}

th {
  text-align: left;
}

tbody {
  width: 100%;
  display: block;
  height: calc(100% - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
}

thead tr {
  background-color: rgba(238, 238, 238, 1);
}

tbody td:nth-child(4) {
  text-align: right;
}

th,
td {
  padding: .5rem;
}

tbody tr:nth-child(even) {
  background-color: rgba(238, 238, 238, .5);
  ;
}

 ::-webkit-scrollbar {
  width: .25rem;
}

 ::-webkit-scrollbar-thumb {
  background-color: #EEEEEE;
}
<div id="header">Header</div>
<div id="list">
  <table>
    <thead>
      <tr>
        <th>Invoice#</th>
        <th>Vendor</th>
        <th>Date</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>LONG INVOICE NUMBER</td>
        <td>VERY LONG VENDOR NAME</td>
        <td>08/25/20</td>
        <td>-318.21</td>
      </tr>
      <tr>
        <td>LONG INVOICE NUMBER</td>
        <td>LONG VENDOR NAME</td>
        <td>08/27/20</td>
        <td>-1,272.83</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>03/30/20</td>
        <td>16,187.52</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>04/03/20</td>
        <td>674.52</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>04/24/20</td>
        <td>2,640.00</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>04/24/20</td>
        <td>4,500.00</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>04/30/20</td>
        <td>7,455.74</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>06/11/20</td>
        <td>8,120.95</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>11/24/20</td>
        <td>3,798.75</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>11/25/20</td>
        <td>2,010.00</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>10/01/20</td>
        <td>2,069.40</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>10/21/20</td>
        <td>3,878.14</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>11/19/20</td>
        <td>3,855.00</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>11/23/20</td>
        <td>1,695.00</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>11/23/20</td>
        <td>2,010.00</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>11/23/20</td>
        <td>2,084.25</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>06/18/20</td>
        <td>7,738.37</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>07/13/20</td>
        <td>33,256.10</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>07/17/20</td>
        <td>3,146.25</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>08/13/20</td>
        <td>3,167.50</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>09/25/20</td>
        <td>3,067.50</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>09/30/20</td>
        <td>1,357.05</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>08/11/20</td>
        <td>4,369.23</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>07/30/20</td>
        <td>-105.10</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>05/04/17</td>
        <td>-1,117.80</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>10/09/20</td>
        <td>457.97</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>01/31/20</td>
        <td>566.36</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>12/03/19</td>
        <td>22.50</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>10/22/20</td>
        <td>14,964.00</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>05/05/20</td>
        <td>5,509.80</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>11/10/20</td>
        <td>273.30</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>09/17/20</td>
        <td>-37.71</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>10/19/20</td>
        <td>1,124.91</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>06/03/14</td>
        <td>-8,100.00</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>10/08/20</td>
        <td>7,856.64</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>10/08/20</td>
        <td>15,647.74</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>10/13/20</td>
        <td>8,621.87</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>10/21/20</td>
        <td>2,670.01</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>10/20/20</td>
        <td>315.62</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>10/19/20</td>
        <td>17,775.00</td>
      </tr>
      <tr>
        <td>INVOICE NUMBER</td>
        <td>VENDOR NAME</td>
        <td>12/16/20</td>
        <td>215,000.00</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="detail">Detail</div>
<div id="footer">Footer</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
eleethesontai
  • 454
  • 5
  • 19
  • 1
    Does this answer your question? [Table fixed header and scrollable body](https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body) – blurfus Mar 10 '21 at 22:28
  • not really all of those options seemed to use a %based width and i was hoping to not have to give the columns an actual width. The problem is that i like the way the table sizes the columns by default. but that feature seemed to stop working when i made the changes so that the thead stayed at the top. oh well back to the drawing board lol. – eleethesontai Mar 10 '21 at 23:06

0 Answers0