How to force html to give the width of a column you want?

Question

I am working on a project where I need to coloring columns of an html table based on how much percentage of a total that data takes up. For example if Alice has 3 apples and 1 orange, that row should be 75% colored for apple, and the other 25% for orange. And if Bob has 2 apples and 2 oranges is should be colored 50/50. My expertise isn't in HTML/CSS, so I am very confused with how my html is working. If do only one row of a table I get the correct answer, but when I add rows, they couple together and don't have the same proportions.

<table style="width: 100%">
<tr>
  <td width="10%" bgcolor="#4a5666">&nbsp;</td>
  <td width="80%" bgcolor="#304aa6">&nbsp;</td>
  <td width="10%" bgcolor="#4a5666">&nbsp;</td>
</tr>
<tr>
 <td width="6%" bgcolor="#4a5666">&nbsp;</td>
 <td width="16%"bgcolor="#304aa6">&nbsp;</td>
 <td width="76" bgcolor="#4a5666">&nbsp;</td>
</tr>
</table>

Am I doing something wrong, and is there a way I can fix it? Thanks

Coupled Rows

refer this link you will get a answer
– Dinesh s Jan 22 '21 at 16:08 — Dinesh s, Jan 22 '21 at 16:08

score 0 · Answer 1 · answered Jan 22 '21 at 16:11

Check this solution out:

<html>

<head>
  <style type="text/css">
    .mytable {
      border-collapse: collapse;
      width: 100%;
      background-color: white;
    }
    .mytable-head {
      border: 1px solid black;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .mytable-head td {
      border: 1px solid black;
    }
    .mytable-body {
      border: 1px solid black;
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .mytable-body td {
      border: 1px solid black;
      border-top: 0;
    }
    .mytable-footer {
      border: 1px solid black;
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }
    .mytable-footer td {
      border: 1px solid black;
      border-top: 0;
    }
  </style>
</head>

<body>
  <table class="mytable mytable-head">
    <tr>
      <td width="25%">25</td>
      <td width="50%">50</td>
      <td width="25%">25</td>
    </tr>
  </table>
  <table class="mytable mytable-body">
    <tr>
      <td width="50%">50</td>
      <td width="30%">30</td>
      <td width="20%">20</td>
    </tr>
  </table>
  <table class="mytable mytable-body">
    <tr>
      <td width="16%">16</td>
      <td width="68%">68</td>
      <td width="16%">16</td>
    </tr>
  </table>
  <table class="mytable mytable-footer">
    <tr>
      <td width="20%">20</td>
      <td width="30%">30</td>
      <td width="50%">50</td>
    </tr>
  </table>
</body>

</html>

Credits to @TokPhobia for this answer (html table cell width for different rows)

DCR · Answer 2 · 2021-01-22T16:18:35.003

tables have columns. The width of a column is constant. Use separate tables

table{
box-sizing:unset;
border-spacing:0;
}

<table style="width: 100%;">
<tr>
  <td width="10%" bgcolor="#4a5666">&nbsp;</td>
  <td width="80%" bgcolor="#304aa6">&nbsp;</td>
  <td width="10%" bgcolor="#4a5666">&nbsp;</td>
</tr>
</table>
<table style="width: 100%;">
<tr>
 <td width="6%" bgcolor="#4a5666">&nbsp;</td>
 <td width="16%"bgcolor="#304aa6">&nbsp;</td>
 <td width="76%" bgcolor="#4a5666">&nbsp;</td>
</tr>
</table>

score -1 · Answer 3 · answered Jan 22 '21 at 16:18

-1

You're printing two rows of table in a wrong way, try to use col and row class in your tag. That's how it'll be responsive also won't need to add the width too.

answered Jan 22 '21 at 16:18

Lalarukh khan

95
7

How to force html to give the width of a column you want?

3 Answers3