Grafik batang horizontal dalam html

Question

Untuk bagan batang horizontal ini, HTML sedikit berbeda, namun, saya mencoba menggunakan kode CSS Anda untuk Judul dan Label sumbu Y

Table of Contents Show

Bagaimana cara menambahkan bilah horizontal di HTML?
Bagaimana cara membuat grafik batang dengan HTML?
Bagaimana cara membuat grafik batang horizontal?
Bagaimana cara membuat bagan batang horizontal dalam JavaScript?

Sayangnya, Judul dan Label saya tidak berlaku

Inilah yang saya miliki sejauh ini…

<!DOCTYPE HTML>
<html lang="en">

<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

  <title>sp_bar-chart-horizontal_v03.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    /**************************************************************************/
    /* GENERIC                                                                */
    /**************************************************************************/
    *{
      margin: 0;
      padding: 0;
    }
    
    *,
    *:before,
    *:after{
      box-sizing: border-box;
    }

    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
      color: #000;
    }

    
    /**************************************************************************/
    /* DESKTOP                                                                */
    /**************************************************************************/
    
    /* FIGURE */
    figure{
      min-width: 200px;
      max-width: 600px;
      margin: 2rem;
      padding: 1.5rem 2rem 2rem;
      border: 1px solid #000;
    }
    
    /* TABLE */
    .barChart_h{
      display: block;
      height: auto;                         /* Do I need this? */
      width: 100%;
      overflow-wrap: break-word;
      border-spacing: 0;
    }
    
    /* CAPTION */
    .barChart_h caption{
      display: block;
      padding: 0 0 1rem 0;
      line-height: 1.1;
      font-size: 1.1rem;
      font-weight: bold;
      text-align: left;
    }
    
    /* TBODY */    
    .barChart_h tbody{
      display: block                        /* All HTML elements have a "display" value assigned by the User-Agent (UA).
                                               Default-values assigned:
                                                  tbody ==> (display: table-row-group)
                                                  tr    ==> (display: table-row)
                                                  td    ==> (display: table-cell)
                                               Assigning (display: block) allows us to turn a table into a horizontal display. */
    }

    .barChart_h tbody:after{                /* For IE9 and under, need to enclose floats.. */
      content: "";
      display: block;
      clear: both;
      height: 0;
    }
    
    /* TH */
    .barChart_h tbody th{
      width: 25%;
      font-weight: normal;
      text-align: right;
    }

    /* TD */
    .barChart_h tbody td{
      border-left: 2px solid #F00;          /* X-AXIS. (vertical) */
      
      border-right: 1px solid #DDD;         /* Finish out repeating vertical-gridlines. */
      
      background-image: linear-gradient(to right, #DDD 1px, transparent 1px);
                                            /* Create black-transparent gradient for 1px, then remainder of gradient is transparent.
                                               This creates the illusion of a 1px vertical-line. */
      background-size: 10% 100%;            /* Go right in 10% increments. */
    }

    /* TH+TD */
    .barChart_h tbody th,
    .barChart_h tbody td{
      padding: 0.5rem 0 0.4rem 0;           /* Space around Bars. */
    }
                                            
    .barChart_h tbody tr.firstRow th,
    .barChart_h tbody tr.firstRow td{
      padding: 1rem 0 0.5rem 0;             /* Add spacing. */
    }
    
    .barChart_h tbody tr.lastRow th,
    .barChart_h tbody tr.lastRow td{
      padding: 0.5rem 0 1rem 0;             /* Add spacing. */
    }
    
    /* BARS */
    .barChart_h tbody td span{
      position: relative;                   /* Needed for absolute-positioning of Bar-value. */
      display: block;                       /* Expands <span> to fill <td> */
      height: 20px;
      background: #99FFFF;
      border-top: 1px solid #000;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.3);
    }
    
    /* BAR-VALUES */
    .barChart_h tbody td span b{
      position: absolute;
      left: 100%;
      top: 0;
      right: auto;
      bottom: 0;
      display: block;
      padding: 0 0 0 0.5rem;
    }
        
    /* Y-AXIS TITLE+LABELS */
    .barChart_h tbody th.y-axis{
      display: block;
      width: 100%;
/*      width: calc(100% + 2px);            /* Hide right border. /**/

      display: flex;                        /* Create Flexbox (Flex-Container). */
      padding-bottom: 1.4rem;
      font-weight: bold;
      border-bottom: 2px solid #F00;        /* Y-AXIS. (horizontal) */
      background-color: #FFF;
    }

    
    /* NEED HELP WITH STYLES BELOW.. */

    /* Y-AXIS TITLE */
    .barChart_h tbody .rotate{
      display: block;
    }
/*    
      -ms-writing-mode: initial;
      writing-mode: initial;
      white-space: nowrap;
      transform: none;
      margin: 0;
      line-height: normal;
      font-size: 0.9rem;
    }
/**/

    /* Y-AXIS LABELS */
    .barChart_h tbody th.y-axis ol.segments{
      position: absolute;
      top: auto;
      bottom: 0;
      right: 0;
      left: 0;
      display: flex;                        /* Create Flexbox (Flex-Container). */
      flex-direction: row;
      font-size: 0.9rem;
    }

    .barChart_h tbody ol.segments li{
      flex: 1 0 0;
      text-align: right;
    }

    .barChart_h tbody ol.segments li b{
      display: inline-flex;
      transform: translate(50%, 0%);
    }

    .barChart_h tbody ol.segments li.zero{
      left: 0;
      right: auto;
      bottom: auto;
      top: 0;
    }

    .barChart_h tbody ol.segments li.zero b{
      transform: translate(-50%, 0%);
    }

    /**************************************************************************/
    /* MOBILE                                                                 */
    /**************************************************************************/
    @media screen and (max-width: 414px){
      body{
        font-size: 0.8em;
      }
      
      /* CAPTION */
      .barChart_h caption{
        font-size: 1rem;
      }

      /* FIGURE */
      figure{
        margin: 0;
        padding: 1rem;
      }
      
      /* TD */
      .barChart_h tbody td{
        width: 60%;
      }
    }
        
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  <figure>
    <table class="barChart_h">
      <caption>Q1: My waiter provided good service tonight.</caption>

      <tbody>
        <!-- Y-axis -->
        <tr>
          <th class="blankCell"></th>
          <th class="y-axis">
            <div class="rotate">Responses</div>
            <ol class="segments">
              <li><b>100</b></li>
              <li><b>80</b></li>
              <li><b>60</b></li>
              <li><b>40</b></li>
              <li><b>20</b></li>
              <li class="zero"><b>0</b></li>
            </ol>
          </th>
        </tr>
        
        <!-- Data Rows -->
        <tr class="firstRow">
          <th scope="row">Stongly Disagree:</th>
          <td><span style="width:10%"><b>10</b></span></td>
        </tr>
        <tr>
          <th scope="row">Disagree:</th>
          <td><span style="width:30%"><b>30</b></span></td>
        </tr>
        <tr>
          <th scope="row">Neither:</th>
          <td><span style="width:20%"><b>20</b></span></td>
        </tr>
        <tr>
          <th scope="row">Strongly Agree:</th>
          <td><span style="width:70%"><b>70</b></span></td>
        </tr>
        <tr class="lastRow">
          <th scope="row">Strongly Agree:</th>
          <td><span style="width:40%"><b>40</b></span></td>
        </tr>
      </tbody>

    </table>
  </figure>
  
</body>
</html>

Tidak menuntut apa yang saya lakukan salah, tetapi saya berharap Anda dapat membantu saya memperbaiki keadaan

terima kasih

@PaulOB ,

Terima kasih atas tips di atas

Saya dapat membuat semuanya berfungsi dan cocok dengan contoh Anda, dan di bawah ini adalah kode saya yang diperbarui…

<!DOCTYPE HTML>
<html lang="en">

<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

  <title>sp_bar-chart-horizontal_v05.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    /**************************************************************************/
    /* GENERIC                                                                */
    /**************************************************************************/
    *{
      margin: 0;
      padding: 0;
    }
    
    *,
    *:before,
    *:after{
      box-sizing: border-box;
    }

    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
      color: #000;
    }

    
    /**************************************************************************/
    /* DESKTOP                                                                */
    /**************************************************************************/
    
    /* FIGURE */
    figure{
      min-width: 200px;
      max-width: 780px;
/*      max-width: 600px;                     /**/
      margin: 2rem;
      padding: 1.5rem 2rem 2rem;
      border: 1px solid #000;
    }
    
    /* TABLE */
    .barChart_h{
      display: block;
      height: auto;                         /* Do I need this? */
      width: 100%;
      overflow-wrap: break-word;
      border-spacing: 0;
    }
    
    /* CAPTION */
    .barChart_h caption{
      display: block;
      padding: 0 0 1rem 0;
      line-height: 1.1;
      font-size: 1.1rem;
      font-weight: bold;
      text-align: left;
    }
    
    /* TBODY */    
    .barChart_h tbody{
      display: block                        /* All HTML elements have a "display" value assigned by the User-Agent (UA).
                                               Default-values assigned:
                                                  tbody ==> (display: table-row-group)
                                                  tr    ==> (display: table-row)
                                                  td    ==> (display: table-cell)
                                               Assigning (display: block) allows us to turn a table into a horizontal display. */
    }

    .barChart_h tbody:after{                /* For IE9 and under, need to enclose floats.. */
      content: "";
      display: block;
      clear: both;
      height: 0;
    }
    
    /* TH+TD */
    .barChart_h tbody tr.firstRow th,
    .barChart_h tbody tr.firstRow td{
      padding: 1rem 0 0.5rem 0;             /* Add extra vertical padding. */
    }
    
    .barChart_h tbody th,
    .barChart_h tbody td{
      padding: 0.5rem 0 0.4rem 0;           /* Space around Bars. */
    }
                                            
    .barChart_h tbody tr.lastRow th,
    .barChart_h tbody tr.lastRow td{
      padding: 0.5rem 0 1rem 0;             /* Add extra vertical padding. */
    }
    
    /* TH */
    .barChart_h tbody th{
/*      width: 25%;     /**/
      font-weight: normal;
      text-align: right;
    }

    /* TD */
    .barChart_h tbody td{
      border-left: 2px solid #F00;          /* X-AXIS. (vertical) */
      
      border-right: 1px solid #DDD;         /* Finish out repeating vertical-gridlines. */
      
      background-image: linear-gradient(to right, #DDD 1px, transparent 1px);
                                            /* Create grey-transparent gradient for 1px, then remainder of gradient is transparent.
                                               This creates the illusion of a 1px vertical-line. */
      background-size: 10% 100%;            /* Go right in 10% increments. */
    }

    /* BARS */
    .barChart_h tbody td span{
      position: relative;                   /* Needed for absolute-positioning of Bar-value. */
      display: block;                       /* Expands <span> to fill <td> */
      height: 20px;
      background: #99FFFF;                  /* Aqua (default) */
      border-top: 1px solid #000;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.3);
    }
    
    /* BAR-VALUES */
    .barChart_h tbody td span b{
      position: absolute;
      left: 100%;
      top: 0;
      right: auto;
      bottom: 0;
      display: block;
      padding: 0 0 0 0.5rem;
      font-weight: normal;
    }

    /* Y-AXIS */
    .barChart_h tbody th.blankCell{
      width: 25%;
    }

    .barChart_h tbody th.y-axis{
      position: relative;                   /* New */
      padding-bottom: 1.4rem;
      border-bottom: 2px solid #F00;        /* Y-AXIS. (horizontal) */
      background-color: #FFF;
    }
    
    /* Y-AXIS TITLE */
    .barChart_h tbody div.y-axis-title{
      display: block;
      text-align: center;
      font-weight: bold;
    }    
    
    /* Y-AXIS LABELS */
    .barChart_h tbody ol.y-axis-labels{
      position: absolute;
      top: auto;
      bottom: 0;
      right: 0;
      left: 0;
      display: flex;                        /* Create Flexbox (Flex-Container). */
      flex-direction: row;
      margin: 0;                            /* New */
      padding: 0;                           /* New */
      list-style: none;                     /* New */
      font-size: 0.9rem;
    }

    .barChart_h tbody ol.y-axis-labels li.zero{
      position: absolute;                   /* Remove 0 from Flexbox flow. */ /* New */
      left: 0;
      right: auto;
      bottom: auto;
      top: 0;
    }

    .barChart_h tbody ol.y-axis-labels li.zero b{
      transform: translate(-50%, 0%);
    }

    .barChart_h tbody ol.y-axis-labels li{
      flex: 1 0 0;
      text-align: right;
    }

    .barChart_h tbody ol.y-axis-labels li b{
      display: inline-flex;
      transform: translate(50%, 0%);
      font-weight: normal;
    }
    
    
    /**************************************************************************/
    /* MOBILE                                                                 */
    /**************************************************************************/
    @media screen and (max-width: 414px){
      body{
        font-size: 0.8em;
      }
      
      /* CAPTION */
      .barChart_h caption{
        font-size: 1rem;
      }

      /* FIGURE */
      figure{
        margin: 0;
        padding: 1rem;
      }
      
      /* TD */
      .barChart_h tbody td{
        width: 60%;
      }
    }
        
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  <figure>
    <table class="barChart_h">
      <caption>Q1: My waiter provided good service tonight.</caption>

      <tbody>
        <!-- Y-axis -->
        <tr>
          <th class="blankCell"></th>
          <th class="y-axis">
            <div class="y-axis-title"># of Responses</div>
            <ol class="y-axis-labels">
              <li class="zero"><b>0</b></li>
              <li><b>20</b></li>
              <li><b>40</b></li>
              <li><b>60</b></li>
              <li><b>80</b></li>
              <li><b>100</b></li>
            </ol>
          </th>
        </tr>
        
        <!-- Data Rows -->
        <tr class="firstRow">
          <th scope="row">Stongly Disagree:</th>
          <td><span style="width:10%"><b>10</b></span></td>
        </tr>
        <tr>
          <th scope="row">Disagree:</th>
          <td><span style="width:30%"><b>30</b></span></td>
        </tr>
        <tr>
          <th scope="row">Neither:</th>
          <td><span style="width:20%"><b>20</b></span></td>
        </tr>
        <tr>
          <th scope="row">Strongly Agree:</th>
          <td><span style="width:70%"><b>70</b></span></td>
        </tr>
        <tr class="lastRow">
          <th scope="row">Strongly Agree:</th>
          <td><span style="width:40%"><b>40</b></span></td>
        </tr>
        
      </tbody>

    </table>
  </figure>
  
</body>
</html>

_

Saya punya beberapa pertanyaan lanjutan…

Q1. ) Mengapa saat saya mengarahkan kursor ke <table> di Firefox Dev Tools, itu diperluas ke lebar penuh <figure>, tetapi saat saya mengarahkan kursor ke <table> <tbody> <tr> dan lebih khusus lagi <table> <tbody> <tr> <th class="y-axis">, sepertinya macet dari segi lebar?

Selanjutnya, jika saya menghapus gaya with: 25%;[code] from [code]<tr> <th class="blankCell"> maka semuanya akan mengerut?

Saya ingin label sumbu X memiliki lebar 25%, sehingga area batang harus memiliki lebar 75%

Q2. ) Apakah saya perlu .barChart_h{ height: auto?

Q3. ) Bolehkah meletakkan sumbu Y di bagian bawah bagan batang seperti yang biasanya Anda lihat, atau lebih baik membiarkannya di atas sehingga pengguna seluler dapat melihat sumbu Y tanpa perlu menggulir ke bawah? . )

Q4. ) Apakah akan lebih benar secara semantik untuk menempatkan sumbu Y di <thead> dan meninggalkan palang di <tbody>?

terima kasih

UpstateLeafPeeper

Q1. ) Mengapa saat saya mengarahkan kursor ke <table> di Firefox Dev Tools, itu diperluas ke lebar penuh <figure> , tetapi saat saya mengarahkan kursor ke <table> <tbody> <tr> dan lebih khusus lagi <table> <tbody> <tr> <th class="y-axis"> , sepertinya macet dari segi lebar?
Selanjutnya, jika saya menghapus gaya with: 25%;[code] from [code]<tr> <th class="blankCell"> maka semuanya akan mengerut?
Saya ingin label sumbu X memiliki lebar 25%, sehingga area batang harus memiliki lebar 75%

Sebagian besar masalah berasal dari fakta bahwa Anda menyetel beberapa komponen tabel untuk ditampilkan. blok dan beberapa dibiarkan default. Itu berarti elemen seperti

<!DOCTYPE HTML>
<html lang="en">

<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

  <title>sp_bar-chart-horizontal_v05.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    /**************************************************************************/
    /* GENERIC                                                                */
    /**************************************************************************/
    *{
      margin: 0;
      padding: 0;
    }
    
    *,
    *:before,
    *:after{
      box-sizing: border-box;
    }

    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
      color: #000;
    }

    
    /**************************************************************************/
    /* DESKTOP                                                                */
    /**************************************************************************/
    
    /* FIGURE */
    figure{
      min-width: 200px;
      max-width: 780px;
/*      max-width: 600px;                     /**/
      margin: 2rem;
      padding: 1.5rem 2rem 2rem;
      border: 1px solid #000;
    }
    
    /* TABLE */
    .barChart_h{
      display: block;
      height: auto;                         /* Do I need this? */
      width: 100%;
      overflow-wrap: break-word;
      border-spacing: 0;
    }
    
    /* CAPTION */
    .barChart_h caption{
      display: block;
      padding: 0 0 1rem 0;
      line-height: 1.1;
      font-size: 1.1rem;
      font-weight: bold;
      text-align: left;
    }
    
    /* TBODY */    
    .barChart_h tbody{
      display: block                        /* All HTML elements have a "display" value assigned by the User-Agent (UA).
                                               Default-values assigned:
                                                  tbody ==> (display: table-row-group)
                                                  tr    ==> (display: table-row)
                                                  td    ==> (display: table-cell)
                                               Assigning (display: block) allows us to turn a table into a horizontal display. */
    }

    .barChart_h tbody:after{                /* For IE9 and under, need to enclose floats.. */
      content: "";
      display: block;
      clear: both;
      height: 0;
    }
    
    /* TH+TD */
    .barChart_h tbody tr.firstRow th,
    .barChart_h tbody tr.firstRow td{
      padding: 1rem 0 0.5rem 0;             /* Add extra vertical padding. */
    }
    
    .barChart_h tbody th,
    .barChart_h tbody td{
      padding: 0.5rem 0 0.4rem 0;           /* Space around Bars. */
    }
                                            
    .barChart_h tbody tr.lastRow th,
    .barChart_h tbody tr.lastRow td{
      padding: 0.5rem 0 1rem 0;             /* Add extra vertical padding. */
    }
    
    /* TH */
    .barChart_h tbody th{
/*      width: 25%;     /**/
      font-weight: normal;
      text-align: right;
    }

    /* TD */
    .barChart_h tbody td{
      border-left: 2px solid #F00;          /* X-AXIS. (vertical) */
      
      border-right: 1px solid #DDD;         /* Finish out repeating vertical-gridlines. */
      
      background-image: linear-gradient(to right, #DDD 1px, transparent 1px);
                                            /* Create grey-transparent gradient for 1px, then remainder of gradient is transparent.
                                               This creates the illusion of a 1px vertical-line. */
      background-size: 10% 100%;            /* Go right in 10% increments. */
    }

    /* BARS */
    .barChart_h tbody td span{
      position: relative;                   /* Needed for absolute-positioning of Bar-value. */
      display: block;                       /* Expands <span> to fill <td> */
      height: 20px;
      background: #99FFFF;                  /* Aqua (default) */
      border-top: 1px solid #000;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.3);
    }
    
    /* BAR-VALUES */
    .barChart_h tbody td span b{
      position: absolute;
      left: 100%;
      top: 0;
      right: auto;
      bottom: 0;
      display: block;
      padding: 0 0 0 0.5rem;
      font-weight: normal;
    }

    /* Y-AXIS */
    .barChart_h tbody th.blankCell{
      width: 25%;
    }

    .barChart_h tbody th.y-axis{
      position: relative;                   /* New */
      padding-bottom: 1.4rem;
      border-bottom: 2px solid #F00;        /* Y-AXIS. (horizontal) */
      background-color: #FFF;
    }
    
    /* Y-AXIS TITLE */
    .barChart_h tbody div.y-axis-title{
      display: block;
      text-align: center;
      font-weight: bold;
    }    
    
    /* Y-AXIS LABELS */
    .barChart_h tbody ol.y-axis-labels{
      position: absolute;
      top: auto;
      bottom: 0;
      right: 0;
      left: 0;
      display: flex;                        /* Create Flexbox (Flex-Container). */
      flex-direction: row;
      margin: 0;                            /* New */
      padding: 0;                           /* New */
      list-style: none;                     /* New */
      font-size: 0.9rem;
    }

    .barChart_h tbody ol.y-axis-labels li.zero{
      position: absolute;                   /* Remove 0 from Flexbox flow. */ /* New */
      left: 0;
      right: auto;
      bottom: auto;
      top: 0;
    }

    .barChart_h tbody ol.y-axis-labels li.zero b{
      transform: translate(-50%, 0%);
    }

    .barChart_h tbody ol.y-axis-labels li{
      flex: 1 0 0;
      text-align: right;
    }

    .barChart_h tbody ol.y-axis-labels li b{
      display: inline-flex;
      transform: translate(50%, 0%);
      font-weight: normal;
    }
    
    
    /**************************************************************************/
    /* MOBILE                                                                 */
    /**************************************************************************/
    @media screen and (max-width: 414px){
      body{
        font-size: 0.8em;
      }
      
      /* CAPTION */
      .barChart_h caption{
        font-size: 1rem;
      }

      /* FIGURE */
      figure{
        margin: 0;
        padding: 1rem;
      }
      
      /* TD */
      .barChart_h tbody td{
        width: 60%;
      }
    }
        
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  <figure>
    <table class="barChart_h">
      <caption>Q1: My waiter provided good service tonight.</caption>

      <tbody>
        <!-- Y-axis -->
        <tr>
          <th class="blankCell"></th>
          <th class="y-axis">
            <div class="y-axis-title"># of Responses</div>
            <ol class="y-axis-labels">
              <li class="zero"><b>0</b></li>
              <li><b>20</b></li>
              <li><b>40</b></li>
              <li><b>60</b></li>
              <li><b>80</b></li>
              <li><b>100</b></li>
            </ol>
          </th>
        </tr>
        
        <!-- Data Rows -->
        <tr class="firstRow">
          <th scope="row">Stongly Disagree:</th>
          <td><span style="width:10%"><b>10</b></span></td>
        </tr>
        <tr>
          <th scope="row">Disagree:</th>
          <td><span style="width:30%"><b>30</b></span></td>
        </tr>
        <tr>
          <th scope="row">Neither:</th>
          <td><span style="width:20%"><b>20</b></span></td>
        </tr>
        <tr>
          <th scope="row">Strongly Agree:</th>
          <td><span style="width:70%"><b>70</b></span></td>
        </tr>
        <tr class="lastRow">
          <th scope="row">Strongly Agree:</th>
          <td><span style="width:40%"><b>40</b></span></td>
        </tr>
        
      </tbody>

    </table>
  </figure>
  
</body>
</html>

_5 masih ditampilkan. tabel-baris dan secara efektif menjadi tabel anonim dan tabel secara default menyusut agar pas dan hanya memiliki lebar konten. Itu sebabnya ketika Anda menghapus lebar itu, elemen akan mengerut

Seperti yang saya sebutkan di utas sebelumnya bahwa untuk bagan vertikal seperti ini dengan dua sel, Anda tidak memerlukan semua tipu daya yang digunakan untuk mengubah bagan horizontal menjadi bagan vertikal. Untuk 'kasus penggunaan' ini, Anda dapat menggunakan perilaku tabel standar karena Anda hanya memiliki dua sel horizontal dan komponen tabel dapat tetap persis seperti yang dirancang

Saya dengan cepat menghapus semua blok tampilan dari kode Anda sehingga kami mendapatkan tampilan tabel alami dan ditempelkan ke dalam pena kode ini

Elemen-elemen sekarang berperilaku alami dan mengambil lebar penuh dari induknya. Saya menambahkan beberapa komentar dalam kode tetapi tidak mendokumentasikan sepenuhnya karena saya kekurangan waktu hari ini

UpstateLeafPeeper

Q4. ) Apakah akan lebih benar secara semantik untuk menempatkan sumbu Y di <thead> dan meninggalkan palang di <tbody> ?

Ini jelas terlihat seperti baris tajuk bagi saya karena mendefinisikan konten vertikal di bawah. Semantik tabel bisa sulit dicapai atau dipahami saat melakukan tata letak yang rumit. Hal utama yang harus ditanyakan adalah apakah tajuk kolom ini merujuk ke seluruh kolom di bawahnya. Jika demikian maka itu jelas merupakan tajuk tabel