时间戳

首页 > 解决方案 > 如何强制 html 给出你想要的列的宽度？

html - 如何强制 html 给出你想要的列的宽度？

问题描述

我正在做一个项目，我需要根据数据占总数据的百分比来为 html 表的列着色。例如，如果 Alice 有 3 个苹果和 1 个橙色，那一行应该是 75% 的颜色是苹果，另外 25% 是橙色。如果鲍勃有 2 个苹果和 2 个橙子，颜色应该是 50/50。我的专长不是 HTML/CSS，所以我对我的 html 的工作方式感到非常困惑。如果只做表格的一行，我会得到正确的答案，但是当我添加行时，它们会耦合在一起并且比例不同。

<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>

我做错了什么，有什么办法可以解决吗？谢谢

耦合行

标签： htmlcss

解决方案

检查此解决方案：

<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>

此答案归功于@TokPhobia（不同行的html表格单元格宽度）

推荐阅读