Проблема изменения размера столбца таблицы

Question

У меня проблема с изменением размера столбца таблицы. Когда я помещаю столбчатую диаграмму и слайд-шоу изображений рядом друг с другом, это приводит к уменьшению столбца таблицы. Изображение ниже показывает, как это выглядит. Предполагается, что первый столбец таблицы является ключом для цветов на графике. Я попытался отрегулировать ширину в CSS, но он изменяет ширину графика, а не ширину столбца таблицы. Что-то не так с CSS, или div в HTML вызывают проблему? Благодарим за помощь.

HTML

    <div class="graph">
      <div class="positive">34%</div>
    </div>
    <div class="graph">
      <div class="negative">23%</div>
    </div>
    <div class="graph">
      <div class="mixed">43%</div>
    </div>

    <table id="tableSentiment" border="1">
  <tr>
    <td id="tableColour" style="background-color: #1E8449"></td>
    <td>Positive</td>
  </tr>
  <tr>
    <td id="tableColour" style="background-color: #CB4335"></td>
    <td>Negative</td>
  </tr>
  <tr>
    <td id="tableColour" style="background-color: #E67E22"></td>
    <td>Mixed</td>
  </tr>
</table> 

CSS

.graph
{
  width: 20%;
  background-color: #aaa;
  border: 0.5px solid black;
}

.positive, .negative, .mixed
{
  text-align: right;
  padding-top: 5px;
  padding-bottom: 5px;
  color: white;
}

.positive 
{
  width: 34%; 
  background-color: #1E8449;
}

.negative 
{
  width: 23%; 
  background-color: #CB4335;
}

.mixed 
{
  width: 43%; 
  background-color: #E67E22;
}

#tableSentiment
{
  border-collapse: collapse;
  padding: 10px;
  width: 15%;
  text-align: center; 
  font-size: 100%;
  left: 10%;
}

#tableColour
{
  width: 15%;
}

Answer 1

Если бы у меня была правильная интерпретация того, чего вы пытаетесь достичь, вы, возможно, захотите использовать сетку. Что я сделал, так это обернул ваши элементы внутри элементов div, а затем поместил эти элементы div в контейнер контейнеров. У этого контейнера div .grid-container будет display: grid, остальное - просто настройка столбцов и строк.

.grid-container {
  display: grid;
  grid-template-rows: 50% 50% ;
  grid-template-columns: 50% 50%;
  column-gap: 20px;
  width: 80%;
  margin: 0 auto;
}


.graph-container{
  grid-column: 1 / span 1; /**Configure the column*/
  grid-row: 1 /span 1; /**Configure the row*/
}

.graph-container{
  grid-column: 1 / span 1;
  grid-row: 2 /span 1;
}

.imageContainer{
  grid-column: 2 / span 1;
  grid-row: 1 /span 2;
}

.graph {

  background-color: #aaa;
  border: 0.5px solid black;
}

.imga{
 width: 100%;
}

.positive,
.negative,
.mixed {
  text-align: right;
  padding-top: 5px;
  padding-bottom: 5px;
  color: white;
}

.positive {
  width: 34%;
  background-color: #1E8449;
}

.negative {
  width: 23%;
  background-color: #CB4335;
}

.mixed {
  width: 43%;
  background-color: #E67E22;
}

#tableSentiment {
  border-collapse: collapse;
  padding: 10px;
  width: 100%; /*Adjust the table so it will fit inside its parent container*/
  text-align: center;
  font-size: 100%; 
  left: 10%;
}

#tableColour {
  width: 15%;
}

<div class="grid-container"> <!--Main container -->
  <div class="graph-container"> <!-- Container for your graphs-->
    <div class="graph">
      <div class="positive">34%</div>
    </div>
    <div class="graph">
      <div class="negative">23%</div>
    </div>
    <div class="graph">
      <div class="mixed">43%</div>
    </div>
  </div>
  
    <div id="sentimentContainer"> <!--Container for your guide-->
    <table id="tableSentiment" border="1">
      <tr>
        <td id="tableColour" style="background-color: #1E8449"></td>
        <td>Positive</td>
      </tr>
      <tr>
        <td id="tableColour" style="background-color: #CB4335"></td>
        <td>Negative</td>
      </tr>
      <tr>
        <td id="tableColour" style="background-color: #E67E22"></td>
        <td>Mixed</td>
      </tr>
    </table>
  </div>
  
  <div class="imageContainer"> <!--Container for your image-->
  <img class="imga" src="https://c.pxhere.com/photos/7d/c2/adorable_animal_blur_bokeh_cat_cat_face_close_up_cute-1492927.jpg!d" />
  </div>



</div>