Question 294990 in CSS Question posted in
Some basic documentation can be found here.

How to get rid of these white space in css table

I have a C# program where I have a function to create an HTMl file, I am trying to create a Table that has 40 rows and 6 columns but I want the first column to have a different height and second column to have 4 rows to make up for that single cells height from column 1, I try to remove padding, margin , but the space under the rows keeps moving with the first column. Do I have to treat them as different tables to accomplish that? Note: I am a backend developer and I suck at front end lol. I have to fill these individual cells with data from my database by running SQL queries. The measurement column will also be filled using the database, I am just trying to create a skeleton to build on.

       static void CreateHTMLFile(List<string> columnHeaders, List<List<string>> rowData)
       {
           string htmlContent = $@"
   <!DOCTYPE html>
   <html>
   <head>
       <title>WSE Scorecard</title>
       <style>
           /* Add your CSS styles here */
           .table-container {{
               display: flex;
               flex-direction: column;
           }}
           .row {{
               display: flex;
               flex-direction: row;
               align-items: flex-start;
               margin: 0; /* Remove margin */
           }}

           .cell {{
               box-sizing: border-box;
               border: 1px solid #dddddd;
               text-align: left;
               padding: 8px;
               margin: 0; /* Remove margin */
           }}
           .header-cell {{
               background-color: #f2f2f2;
               white-space: normal; /* Enable text wrapping for header cells */
           }}
           .fixed-width-header {{
               width: 135px; /* Adjust the width as needed */
           }}
           .fixed-height-header {{
               height: 50px; /* Adjust the height as needed for the first column */
           }}
           .vertical-text {{
               writing-mode: vertical-rl; /* Vertical text style */
               transform: rotate(180deg); /* For Firefox */
           }}
           .fixed-width {{
               width:135px; /* Adjust the width as needed for columns 2 and onwards */
           }}
           .fixed-height {{
               height: 50px; /* Adjust the height as needed for rows 2 and onwards */
           }}
           .fixed-width1 {{
               width: 50px; /* Adjust the width as needed */
           }}
           .fixed-height1 {{
               height: 250px; /* Adjust the width as needed */
           }}
       </style>
   </head>
   <body>
       <div class='table-container'>";

           // Add column headers
           htmlContent += @"
               <div class='row header-row'>
                   <div class='cell header-cell fixed-width1 fixed-height-header'></div>";
           foreach (string header in columnHeaders)
           {
               htmlContent += $@"
               <div class='cell header-cell fixed-width-header fixed-height-header'>{header}</div>";
           }
           htmlContent += @"
           </div>";

           // Add row data
           foreach (List<string> row in rowData)
           {
               htmlContent += @"
           <div class='row'>";
               foreach (string cell in row)
               {
                   // Apply vertical text style to the first column
                   if (row.IndexOf(cell) == 0)
                   {
                       htmlContent += $@"
                   <div class='cell vertical-text fixed-width1 fixed-height1'>{cell}</div>";
                   }
                   else
                   {
                       htmlContent += $@"
                   <div class='cell fixed-width fixed-height'>{cell}</div>";
                   }
               }
               htmlContent += @"
           </div>";
           }

           htmlContent += @"
       </div>
   </body>
   </html>";

Final rendered HTML:

<!DOCTYPE html>
<html>
<head>
    <title>WSE Scorecard</title>
    <style>
        /* Add your CSS styles here */
        .table-container {
            display: flex;
            flex-direction: column;
        }
        .row {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            margin: 0; /* Remove margin */
        }

        .cell {
            box-sizing: border-box;
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
            margin: 0; /* Remove margin */
        }
        .header-cell {
            background-color: #f2f2f2;
            white-space: normal; /* Enable text wrapping for header cells */
        }
        .fixed-width-header {
            width: 135px; /* Adjust the width as needed */
        }
        .fixed-height-header {
            height: 50px; /* Adjust the height as needed for the first column */
        }
        .vertical-text {
            writing-mode: vertical-rl; /* Vertical text style */
            transform: rotate(180deg); /* For Firefox */
        }
        .fixed-width {
            width:135px; /* Adjust the width as needed for columns 2 and onwards */
        }
        .fixed-height {
            height: 50px; /* Adjust the height as needed for rows 2 and onwards */
        }
        .fixed-width1 {
            width: 50px; /* Adjust the width as needed */
        }
        .fixed-height1 {
            height: 250px; /* Adjust the width as needed */
        }
    </style>
</head>
<body>
    <h2>WSE Scorecard</h2>
    <div class='table-container'>
            <div class='row header-row'>
                <div class='cell header-cell fixed-width1 fixed-height-header'></div>
            <div class='cell header-cell fixed-width-header fixed-height-header'>MEASUREMENT</div>
            <div class='cell header-cell fixed-width-header fixed-height-header'>TIER</div>
            <div class='cell header-cell fixed-width-header fixed-height-header'>TARGET</div>
            <div class='cell header-cell fixed-width-header fixed-height-header'>THRESHOLD</div>
            <div class='cell header-cell fixed-width-header fixed-height-header'>VALUE</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'>SAFETY</div>
                <div class='cell fixed-width fixed-height'>First Aid (# visits)</div>
                <div class='cell fixed-width fixed-height'>97</div>
                <div class='cell fixed-width fixed-height'>12</div>
                <div class='cell fixed-width fixed-height'>78</div>
                <div class='cell fixed-width fixed-height'>9</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'>QUALITY</div>
                <div class='cell fixed-width fixed-height'>Recordable Injuries</div>
                <div class='cell fixed-width fixed-height'>13</div>
                <div class='cell fixed-width fixed-height'>82</div>
                <div class='cell fixed-width fixed-height'>49</div>
                <div class='cell fixed-width fixed-height'>66</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'>DELIVERY</div>
                <div class='cell fixed-width fixed-height'># Near Misses</div>
                <div class='cell fixed-width fixed-height'>88</div>
                <div class='cell fixed-width fixed-height'>3</div>
                <div class='cell fixed-width fixed-height'>60</div>
                <div class='cell fixed-width fixed-height'>49</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'>COST</div>
                <div class='cell fixed-width fixed-height'># of Lost Times</div>
                <div class='cell fixed-width fixed-height'>39</div>
                <div class='cell fixed-width fixed-height'>83</div>
                <div class='cell fixed-width fixed-height'>33</div>
                <div class='cell fixed-width fixed-height'>97</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'>MORALE</div>
                <div class='cell fixed-width fixed-height'>Top Scrap % by part #</div>
                <div class='cell fixed-width fixed-height'>90</div>
                <div class='cell fixed-width fixed-height'>25</div>
                <div class='cell fixed-width fixed-height'>19</div>
                <div class='cell fixed-width fixed-height'>59</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'>TOOLING</div>
                <div class='cell fixed-width fixed-height'>Total Number of Pieces Scrapped</div>
                <div class='cell fixed-width fixed-height'>70</div>
                <div class='cell fixed-width fixed-height'>37</div>
                <div class='cell fixed-width fixed-height'>46</div>
                <div class='cell fixed-width fixed-height'>22</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Internal Scrap (%)</div>
                <div class='cell fixed-width fixed-height'>6</div>
                <div class='cell fixed-width fixed-height'>96</div>
                <div class='cell fixed-width fixed-height'>64</div>
                <div class='cell fixed-width fixed-height'>75</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Customer Issues</div>
                <div class='cell fixed-width fixed-height'>35</div>
                <div class='cell fixed-width fixed-height'>27</div>
                <div class='cell fixed-width fixed-height'>72</div>
                <div class='cell fixed-width fixed-height'>43</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Customer Repeat Issues</div>
                <div class='cell fixed-width fixed-height'>1</div>
                <div class='cell fixed-width fixed-height'>71</div>
                <div class='cell fixed-width fixed-height'>85</div>
                <div class='cell fixed-width fixed-height'>3</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Vendor Non-Conformance</div>
                <div class='cell fixed-width fixed-height'>56</div>
                <div class='cell fixed-width fixed-height'>14</div>
                <div class='cell fixed-width fixed-height'>34</div>
                <div class='cell fixed-width fixed-height'>45</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Missed PPAP dates</div>
                <div class='cell fixed-width fixed-height'>11</div>
                <div class='cell fixed-width fixed-height'>79</div>
                <div class='cell fixed-width fixed-height'>84</div>
                <div class='cell fixed-width fixed-height'>43</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Past Due CARs/PARs/PDCAs</div>
                <div class='cell fixed-width fixed-height'>39</div>
                <div class='cell fixed-width fixed-height'>61</div>
                <div class='cell fixed-width fixed-height'>8</div>
                <div class='cell fixed-width fixed-height'>64</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Planned Production # of parts</div>
                <div class='cell fixed-width fixed-height'>64</div>
                <div class='cell fixed-width fixed-height'>1</div>
                <div class='cell fixed-width fixed-height'>64</div>
                <div class='cell fixed-width fixed-height'>41</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Real production # of parts</div>
                <div class='cell fixed-width fixed-height'>44</div>
                <div class='cell fixed-width fixed-height'>5</div>
                <div class='cell fixed-width fixed-height'>36</div>
                <div class='cell fixed-width fixed-height'>50</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Real production vs Planned Production (%)</div>
                <div class='cell fixed-width fixed-height'>18</div>
                <div class='cell fixed-width fixed-height'>72</div>
                <div class='cell fixed-width fixed-height'>85</div>
                <div class='cell fixed-width fixed-height'>33</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>ON Time Delivery (%)</div>
                <div class='cell fixed-width fixed-height'>9</div>
                <div class='cell fixed-width fixed-height'>61</div>
                <div class='cell fixed-width fixed-height'>9</div>
                <div class='cell fixed-width fixed-height'>5</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Expedited Deliveries (JNM/WMT Caused)</div>
                <div class='cell fixed-width fixed-height'>45</div>
                <div class='cell fixed-width fixed-height'>64</div>
                <div class='cell fixed-width fixed-height'>81</div>
                <div class='cell fixed-width fixed-height'>73</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Labour variance (hours & $)</div>
                <div class='cell fixed-width fixed-height'>25</div>
                <div class='cell fixed-width fixed-height'>9</div>
                <div class='cell fixed-width fixed-height'>52</div>
                <div class='cell fixed-width fixed-height'>69</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Offline Rework (hrs & $)</div>
                <div class='cell fixed-width fixed-height'>53</div>
                <div class='cell fixed-width fixed-height'>40</div>
                <div class='cell fixed-width fixed-height'>91</div>
                <div class='cell fixed-width fixed-height'>83</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Total non value added labour (hours, % & $)</div>
                <div class='cell fixed-width fixed-height'>17</div>
                <div class='cell fixed-width fixed-height'>80</div>
                <div class='cell fixed-width fixed-height'>9</div>
                <div class='cell fixed-width fixed-height'>7</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Machine Run Rate</div>
                <div class='cell fixed-width fixed-height'>2</div>
                <div class='cell fixed-width fixed-height'>73</div>
                <div class='cell fixed-width fixed-height'>76</div>
                <div class='cell fixed-width fixed-height'>88</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Quote vs Act (%)</div>
                <div class='cell fixed-width fixed-height'>29</div>
                <div class='cell fixed-width fixed-height'>89</div>
                <div class='cell fixed-width fixed-height'>3</div>
                <div class='cell fixed-width fixed-height'>56</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Uptime Efficiency Utilization Machine (% Uptime)</div>
                <div class='cell fixed-width fixed-height'>64</div>
                <div class='cell fixed-width fixed-height'>57</div>
                <div class='cell fixed-width fixed-height'>2</div>
                <div class='cell fixed-width fixed-height'>87</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Scheduled Maintenance (Total Hours)</div>
                <div class='cell fixed-width fixed-height'>35</div>
                <div class='cell fixed-width fixed-height'>9</div>
                <div class='cell fixed-width fixed-height'>54</div>
                <div class='cell fixed-width fixed-height'>15</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>In-Press Die Repair Man Hours (Total Down Press Hours)</div>
                <div class='cell fixed-width fixed-height'>1</div>
                <div class='cell fixed-width fixed-height'>61</div>
                <div class='cell fixed-width fixed-height'>5</div>
                <div class='cell fixed-width fixed-height'>10</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>All Equipment OEE %</div>
                <div class='cell fixed-width fixed-height'>95</div>
                <div class='cell fixed-width fixed-height'>19</div>
                <div class='cell fixed-width fixed-height'>28</div>
                <div class='cell fixed-width fixed-height'>48</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Die setup efficiency</div>
                <div class='cell fixed-width fixed-height'>36</div>
                <div class='cell fixed-width fixed-height'>46</div>
                <div class='cell fixed-width fixed-height'>60</div>
                <div class='cell fixed-width fixed-height'>1</div>
        </div>
        <div class='row'>
                <div class='cell vertical-text fixed-width1 fixed-height1'></div>
                <div class='cell fixed-width fixed-height'>Die Set Up / Tear Down Man Hours (Total Down Press Hours)</div>
                <div class='cell fixed-width fixed-height'>77</div>
                <div class='cell fixed-width fixed-height'>82</div>
                <div class='cell fixed-width fixed-height'>87</div>
                <div class='cell fixed-width fixed-height'>22</div>
        </div>
   </div>
</body>
</html>
Tags:

2

Answers


  1. 0

    Alright. First I had to create your HTML table as I imagined.

    .rotate-text {
  display: inline-block;
  transform: rotate(-90deg);
}
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WSE Score Card</title>
  </head>
  <body>
    <table class="table" border="1">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">MEASUREMENT</th>
          <th scope="col">TIER</th>
          <th scope="col">TARGET</th>
          <th scope="col">THRESHOLD</th>
          <th scope="col">VALUE</th>
        </tr>
      </thead>
      <tbody>

        <!-- SAFETY SECTION -->
        <!-- ROW 1 -->
        <tr>
          <!-- SPANS 5 ROWS -->
          <th scope="row" rowspan="5"><span class="rotate-text">SAFETY</span></th>
          <td>First Aid (# visits)</td>
          <td>97</td>
          <td>12</td>
          <td>78</td>
          <td>9</td>
        </tr>
        <!-- ROW 2 -->
        <tr>
          <!-- <th scope="row">REMOVED DUE TO rowspan="5"</th> -->
          <td>First Aid (# visits)</td>
          <td>97</td>
          <td>12</td>
          <td>78</td>
          <td>9</td>
        </tr>
        <!-- ROW 3 -->
        <tr>
          <!-- <th scope="row">REMOVED DUE TO rowspan="5"</th> -->
          <td>First Aid (# visits)</td>
          <td>97</td>
          <td>12</td>
          <td>78</td>
          <td>9</td>
        </tr>
        <!-- ROW 4 -->
        <tr>
          <!-- <th scope="row">REMOVED DUE TO rowspan="5"</th> -->
          <td>First Aid (# visits)</td>
          <td>97</td>
          <td>12</td>
          <td>78</td>
          <td>9</td>
        </tr>
        <!-- ROW 5 -->
        <tr>
          <!-- <th scope="row">REMOVED DUE TO rowspan="5"</th> -->
          <td>First Aid (# visits)</td>
          <td>97</td>
          <td>12</td>
          <td>78</td>
          <td>9</td>
        </tr>

        <!-- QUALITY SECTION -->
        <!-- ROW 1 -->
        <tr>
          <!-- SPANS 5 ROWS -->
          <th scope="row" rowspan="5"><span class="rotate-text">QUALITY</span></th>
          <td>Recorded Injuries</td>
          <td>13</td>
          <td>82</td>
          <td>49</td>
          <td>66</td>
        </tr>
        <!-- ROW 2 -->
        <tr>
          <!-- SPANS 5 ROWS -->
          <!-- <th scope="row">REMOVED DUE TO rowspan="5"</th> -->
          <td>Recorded Injuries</td>
          <td>13</td>
          <td>82</td>
          <td>49</td>
          <td>66</td>
        </tr>
        <!-- ROW 3 -->
        <tr>
          <!-- SPANS 5 ROWS -->
          <!-- <th scope="row">REMOVED DUE TO rowspan="5"</th> -->
          <td>Recorded Injuries</td>
          <td>13</td>
          <td>82</td>
          <td>49</td>
          <td>66</td>
        </tr>
        <!-- ROW 4 -->
        <tr>
          <!-- SPANS 5 ROWS -->
          <!-- <th scope="row">REMOVED DUE TO rowspan="5"</th> -->
          <td>Recorded Injuries</td>
          <td>13</td>
          <td>82</td>
          <td>49</td>
          <td>66</td>
        </tr>
        <!-- ROW 5 -->
        <tr>
          <!-- SPANS 5 ROWS -->
          <!-- <th scope="row">REMOVED DUE TO rowspan="5"</th> -->
          <td>Recorded Injuries</td>
          <td>13</td>
          <td>82</td>
          <td>49</td>
          <td>66</td>
        </tr>
        <!-- DELIVERY SECTION -->
        <!-- ROW 1 -->
        <tr>
          <!-- SPANS 5 ROWS -->
          <th scope="row" rowspan="5"><span class="rotate-text">DELIVERY</span></th>
          <td>Near Misses</td>
          <td>88</td>
          <td>3</td>
          <td>60</td>
          <td>49</td>
        </tr>
        <!-- ROW 2 -->
        <tr>
          <!-- SPANS 5 ROWS -->
          <!-- <th scope="row">REMOVED DUE TO rowspan="5"</th> -->
          <td>Near Misses</td>
          <td>88</td>
          <td>3</td>
          <td>60</td>
          <td>49</td>
        </tr>
        <!-- ROW 3 -->
        <tr>
          <!-- SPANS 5 ROWS -->
          <!-- <th scope="row">REMOVED DUE TO rowspan="5"</th> -->
          <td>Near Misses</td>
          <td>88</td>
          <td>3</td>
          <td>60</td>
          <td>49</td>
        </tr>
        <!-- ROW 4 -->
        <tr>
          <!-- SPANS 5 ROWS -->
          <!-- <th scope="row">REMOVED DUE TO rowspan="5"</th> -->
          <td>Near Misses</td>
          <td>88</td>
          <td>3</td>
          <td>60</td>
          <td>49</td>
        </tr>
        <!-- ROW 5 -->
        <tr>
          <!-- SPANS 5 ROWS -->
          <!-- <th scope="row">REMOVED DUE TO rowspan="5"</th> -->
          <td>Near Misses</td>
          <td>88</td>
          <td>3</td>
          <td>60</td>
          <td>49</td>
        </tr>
        <!-- OTHER SECTIONS -->
      </tbody>
    </table>

  </body>
</html>

    Then the C# code that creates this table.

    static string CreateHTMLFile()
{
    var sections = new List<(string Header, List<List<string>> Rows)>
    {
        ("SAFETY", new List<List<string>> {
            new List<string>{ "First Aid (# visits)", "97", "12", "78", "9" },
            new List<string>{ "First Aid (# visits)", "97", "12", "78", "9" },
            // ... Add other rows for SAFETY
        }),
        ("QUALITY", new List<List<string>> {
            new List<string>{ "Recorded Injuries", "13", "82", "49", "66" },
            // ... Add other rows for QUALITY
        }),
        ("DELIVERY", new List<List<string>> {
            new List<string>{ "Near Misses", "88", "3", "60", "49" },
            // ... Add other rows for DELIVERY
        })
        // ... Add other sections
    };

    var htmlContent = @"
<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>WSE Score Card</title>
    <style>
      .rotate-text {
        display: inline-block;
        transform: rotate(-90deg);
      }
    </style>
  </head>
  <body>
    <table class='table' border='1'>
      <thead>
        <tr>
          <th scope='col'>#</th>
          <th scope='col'>MEASUREMENT</th>
          <th scope='col'>TIER</th>
          <th scope='col'>TARGET</th>
          <th scope='col'>THRESHOLD</th>
          <th scope='col'>VALUE</th>
        </tr>
      </thead>
      <tbody>";

    foreach (var (Header, Rows) in sections)
    {
        for (int i = 0; i < Rows.Count; i++)
        {
            htmlContent += "n        <tr>";
            if (i == 0)
            {
                htmlContent += $"n          <th scope='row' rowspan='{Rows.Count}'><span class='rotate-text'>{Header}</span></th>";
            }
            foreach (var cell in Rows[i])
            {
                htmlContent += $"n          <td>{cell}</td>";
            }
            htmlContent += "n        </tr>";
        }
    }

    htmlContent += @"
      </tbody>
    </table>
  </body>
</html>";

    return htmlContent;
}
    Login or Signup to reply.
  2. 0

    Not 100% sure on your intent however here I made these assumptions:

    1. Vertical text is in first column on each row group (.row-container)
    2. Each row needs the headers stacked
    3. Values are stacked in column to the right of the row headers

    I put lots of ugly borders and padding etc. just to show what is where.

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

body {
  font-size: 16px;
  /* just to "super center" on the view */
  display: grid;
  place-items: center;
}

.table-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  border: solid red 1px;
}

.header-container {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 3em 1fr;
  grid-template-rows: 3em;
  align-items: center;
  border: dotted blue 1px;
  padding: 0.25em;
}

.header-container .header-cell {
  border: solid blue 1px;
  font-weight: bold;
}

.header-container .header-cell:first-of-type {
  grid-column: 1;
  text-align: center;
}

.header-container .header-cell:last-of-type {
  grid-column: 2 / 3;
}

.rows-container {
  grid-column: 1 / 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 3em  auto;
  border: 1px solid green;
  padding: 0.25em;
}

.row-container {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 3em 1fr 1fr;
  grid-template-rows: repeat(5, 3em);
}

.row-container .vertical-text {
  grid-column: 1;
  grid-row:span 5;
  padding: 1em;
  text-align: end;
}

.row-container .row-header-container {
  grid-column: 2;
}

.row-container .datalist-container {
  grid-column: 3;
}

.row-container .cell {
  border: solid #00FFFF80 1px;
  height: 100%;
  padding: 0.5em;
 }

.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
    <body>
  <h2>WSE Scorecard</h2>
  <div class='table-container'>
    <div class='header-container'>
      <div class='header-cell'>x</div>
      <div class='header-cell'>Measures</div>
    </div>
    <div class='rows-container'>
      <div class='row-container'>
        <div class='cell vertical-text'>SAFETY</div>
        <div classs='row-header-container'>
          <div class='cell header-cell'>MEASURE</div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>First Aid (# visits)</div>
          <div class='cell'>97</div>
          <div class='cell'>12</div>
          <div class='cell'>78</div>
          <div class='cell'>9</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'>QUALITY</div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Recordable Injuries</div>
          <div class='cell'>13</div>
          <div class='cell'>82</div>
          <div class='cell'>49</div>
          <div class='cell'>66</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'>DELIVERY</div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'># Near Misses</div>
          <div class='cell'>88</div>
          <div class='cell'>3</div>
          <div class='cell'>60</div>
          <div class='cell'>49</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'>COST</div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'># of Lost Times</div>
          <div class='cell'>39</div>
          <div class='cell'>83</div>
          <div class='cell'>33</div>
          <div class='cell'>97</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'>MORALE</div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Top Scrap % by part #</div>
          <div class='cell'>90</div>
          <div class='cell'>25</div>
          <div class='cell'>19</div>
          <div class='cell'>59</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'>TOOLING</div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Total Number of Pieces Scrapped</div>
          <div class='cell'>70</div>
          <div class='cell'>37</div>
          <div class='cell'>46</div>
          <div class='cell'>22</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Internal Scrap (%)</div>
          <div class='cell'>6</div>
          <div class='cell'>96</div>
          <div class='cell'>64</div>
          <div class='cell'>75</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Customer Issues</div>
          <div class='cell'>35</div>
          <div class='cell'>27</div>
          <div class='cell'>72</div>
          <div class='cell'>43</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Customer Repeat Issues</div>
          <div class='cell'>1</div>
          <div class='cell'>71</div>
          <div class='cell'>85</div>
          <div class='cell'>3</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Vendor Non-Conformance</div>
          <div class='cell'>56</div>
          <div class='cell'>14</div>
          <div class='cell'>34</div>
          <div class='cell'>45</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Missed PPAP dates</div>
          <div class='cell'>11</div>
          <div class='cell'>79</div>
          <div class='cell'>84</div>
          <div class='cell'>43</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Past Due CARs/PARs/PDCAs</div>
          <div class='cell'>39</div>
          <div class='cell'>61</div>
          <div class='cell'>8</div>
          <div class='cell'>64</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Planned Production # of parts</div>
          <div class='cell'>64</div>
          <div class='cell'>1</div>
          <div class='cell'>64</div>
          <div class='cell'>41</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Real production # of parts</div>
          <div class='cell'>44</div>
          <div class='cell'>5</div>
          <div class='cell'>36</div>
          <div class='cell'>50</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Real production vs Planned Production (%)</div>
          <div class='cell'>18</div>
          <div class='cell'>72</div>
          <div class='cell'>85</div>
          <div class='cell'>33</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>ON Time Delivery (%)</div>
          <div class='cell'>9</div>
          <div class='cell'>61</div>
          <div class='cell'>9</div>
          <div class='cell'>5</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Expedited Deliveries (JNM/WMT Caused)</div>
          <div class='cell'>45</div>
          <div class='cell'>64</div>
          <div class='cell'>81</div>
          <div class='cell'>73</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Labour variance (hours & $)</div>
          <div class='cell'>25</div>
          <div class='cell'>9</div>
          <div class='cell'>52</div>
          <div class='cell'>69</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Offline Rework (hrs & $)</div>
          <div class='cell'>53</div>
          <div class='cell'>40</div>
          <div class='cell'>91</div>
          <div class='cell'>83</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Total non value added labour (hours, % & $)</div>
          <div class='cell'>17</div>
          <div class='cell'>80</div>
          <div class='cell'>9</div>
          <div class='cell'>7</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Machine Run Rate</div>
          <div class='cell'>2</div>
          <div class='cell'>73</div>
          <div class='cell'>76</div>
          <div class='cell'>88</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Quote vs Act (%)</div>
          <div class='cell'>29</div>
          <div class='cell'>89</div>
          <div class='cell'>3</div>
          <div class='cell'>56</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Uptime Efficiency Utilization Machine (% Uptime)</div>
          <div class='cell'>64</div>
          <div class='cell'>57</div>
          <div class='cell'>2</div>
          <div class='cell'>87</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Scheduled Maintenance (Total Hours)</div>
          <div class='cell'>35</div>
          <div class='cell'>9</div>
          <div class='cell'>54</div>
          <div class='cell'>15</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>In-Press Die Repair Man Hours (Total Down Press Hours)</div>
          <div class='cell'>1</div>
          <div class='cell'>61</div>
          <div class='cell'>5</div>
          <div class='cell'>10</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>All Equipment OEE %</div>
          <div class='cell'>95</div>
          <div class='cell'>19</div>
          <div class='cell'>28</div>
          <div class='cell'>48</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Die setup efficiency</div>
          <div class='cell'>36</div>
          <div class='cell'>46</div>
          <div class='cell'>60</div>
          <div class='cell'>1</div>
        </div>
      </div>
      <div class='row-container'>
        <div class='cell vertical-text'></div>
        <div classs='row-header'>
          <div class='cell header-cell'> </div>
          <div class='cell header-cell'>TIER</div>
          <div class='cell header-cell'>TARGET</div>
          <div class='cell header-cell'>THRESHOLD</div>
          <div class='cell header-cell'>VALUE</div>
        </div>
        <div class='datalist-container'>
          <div class='cell'>Die Set Up / Tear Down Man Hours (Total Down Press Hours)</div>
          <div class='cell'>77</div>
          <div class='cell'>82</div>
          <div class='cell'>87</div>
          <div class='cell'>22</div>
        </div>
      </div>
    </div>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search