0

I am creating a "gant chart" style table, so it means that it has to have the first column fixed, and it can be a very long table , from left to right.

I have tried to : 1. use simple HTML; 2. use DIVs and CSS; 3. use TH and CSS; no good results so far

The div was the closest one, but the first column is overflown and the table is not aligned anymore. 

<table >
        <tr>
            <th > &nbsp;</th>

            <td colspan='14'>2019</td>
        </tr>
        <tr><th>&nbsp </th>
            <td colspan='14'>9</td>
        </tr>
        <tr><th> Department - Team</th>
            <td style='width:30px;'>4</td>
            <td style='width:30px;'>5</td>
            <td style='width:30px;'>6</td>
            <td style='width:30px;'>7</td>
            <td style='width:30px;'>8</td>
            <td style='width:30px;'>9</td>
            <td style='width:30px;'>10</td>
            <td style='width:30px;'>11</td>
            <td style='width:30px;'>12</td>
            <td style='width:30px;'>13</td>
            <td style='width:30px;'>14</td>
            <td style='width:30px;'>15</td>
            <td style='width:30px;'>16</td>
            <td style='width:30px;'>17</td></tr>
<tr>
    <th >Corporate Development - Fundraisin </th>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td></tr>
<tr>
    <th >Corporate Development - Marketing </th>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td></tr>
<tr>
    <th >FAS - Team A </th>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAA14;'>5.00</td>
    <td style='width:30px;background-color:#FFAA14;'>5.00</td>
    <td style='width:30px;background-color:#FFAA14;'>5.00</td></tr>
<tr>
    <th >BF Server - Server . </th>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.75</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.75</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.75</td>

</tr>

I expect to see a simple table, but I cannot fit these three outcomes at once: * very long from left to right; * the first column is always visible; * no text overflow (in case of using divs)

Gustavo
  • 37
  • 7
  • You must show your code to make the question more understandable – Nikaido Oct 05 '19 at 11:32
  • I don't think there is a pure-css solution for that. But table element on itself is even less likely to be usable in this case. There are solutions to fix column headers because that one is an element on its own (as here: https://codepen.io/tjvantoll/pen/JEKIu), but row headers are spread across multiple rows. – ZorgoZ Oct 05 '19 at 11:37

1 Answers1

0

Some kind of solution, but I am disappointed to not be able to make the header selectable.
The core of my proposal is using a non visible copy of your headlines to make room for the fixed header and then use z-index property to hide the non usable horizontal scrollbar of the .header-container.

.chart {
  position: relative;
  
/*   simulate horizontal scrolling, to remove */
  width: 700px;
}

.chart-wrapper {
  display: flex;
  
  overflow-x: scroll;
}

.header-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  overflow-x: scroll;
  
  z-index: -1;
}

.data-container {
  display: flex;
  
  pointer-events: none;
}

.header, .header-spacing {
  flex-shrink: 0;
  
  display: flex;
  flex-direction: column;
  
  font-weight: bold;
  text-align: center;
}

.header {
  position: absolute;
  top: 0;
  bottom: 0;
  
  z-index: 1;
  
  background: white;
}

.header-spacing {
  visibility: hidden;
}

.data {  
  z-index: -2;
}

.row {
  display: flex;
  
  width: 100%
}

.row > div, .header > div {
  flex-grow: 1;
  
  min-width: 50px;
  
  margin: 1px;
}
<div class="chart">
  <div class="chart-wrapper">
    <div class="header-container">
      <div class="header">
          <div> Department - Team</div>
          <div>Corporate Development - Fundraisin </div>
          <div>Corporate Development - Marketing </div>
          <div>FAS - Team A </div>
          <div>BF Server - Server . </div>
      </div>
    </div>
    <div class="data-container">
        <div class="header-spacing">
            <div> Department - Team</div>
            <div>Corporate Development - Fundraisin </div>
            <div>Corporate Development - Marketing </div>
            <div>FAS - Team A </div>
            <div>BF Server - Server . </div>
        </div>
        <div class="data">
            <div class="row">
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
                <div>11</div>
                <div>12</div>
                <div>13</div>
                <div>14</div>
                <div>15</div>
                <div>16</div>
                <div>17</div>
            </div>
            <div class="row">
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
            </div>
            <div class="row">
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
            </div>
            <div class="row">
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAA14;">5.00</div>
                <div style="background-color:#FFAA14;">5.00</div>
                <div style="background-color:#FFAA14;">5.00</div>
            </div>
            <div class="row">
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#AAAAFF;">1.75</div>
                <div style="background-color:#AAAAFF;">1.75</div>
                <div style="background-color:#AAAAFF;">1.75</div>
            </div>
        </div>
    </div>
  </div>
</div>
NPP
  • 416
  • 4
  • 3