HTML 表格列高相等-6ren

HTML 表格列高相等

转载作者：可可西里更新时间：2023-11-01 15:00:51

25

4

您好，我是 CSS 的初学者，我在 3 个单独的表格下面有这些表格，我想让所有表格列的高度都相等，有什么简单的方法可以解决这个问题吗？任何建议将不胜感激，谢谢!

Here is my JSFiddle

<body>
        <div class="center">
            <table class="fruitsTable class">
                <thead>
                    <th>Fruits</th>
                </thead>
                <tbody>
                    <tr>
                        <td>Apples</td>
                    </tr>
                    <tr>
                        <td>Grapes</td>
                    </tr>
                    <tr>
                        <td>Oranges</td>
                    </tr>
                    <tr>
                        <td>Mango</td>
                    </tr>
                    <tr>
                        <td>Papaya</td>
                    </tr>
                    <tr>
                        <td>Banana</td>
                    </tr>
                    <tr>
                        <td>Kiwi</td>
                    </tr>
                </tbody>
            </table>
            <table class="fruitsTable2 class" >
                <thead>
                    <th>Fruits</th>
                </thead>
                <tbody >
                    <tr>
                        <td>Mango</td>
                    </tr>
                    <tr>
                        <td>Papaya</td>
                    </tr>
                    <tr>
                        <td>Banana</td>
                    </tr>
                    <tr>
                        <td>Kiwi</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

最佳答案

当表格被 CSS 改变时，这是可能的，但这并不好，

您可以在此处尝试此代码 https://jsfiddle.net/10t4gv92/21/ 或者

.fontcolor {
  color: #25BAD0;
}

.center {
  display: flex;
  justify-content: center
}

.class {
  font-family: Open Sans;
}
table,
table tr,
table tr td,
table tr th {
    border-collapse: collapse;
}
table {
  display: block;
  width: 25%;

  border:1px solid #25BAD0;
}

table tr,
table th,
table tr td,
table tbody,
table thead {
  display:block;
  width: 100%;
}
th {
  width:100%;
  color: #0080ff;
  font-weight: normal;
  border-bottom: 1px solid #25BAD0;
}

td {
  width: 100%;
  padding-top: 5px;
  padding-left: 8px;
}

.fruitsTable th { width:100%; }

<div class="center">
  <table class="fruitsTable class">
    <thead>
      <th>Fruits</th>
    </thead>
    <tbody>
      <tr>
        <td>Apples</td>
      </tr>
      <tr>
        <td>Grapes</td>
      </tr>
      <tr>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>Mango</td>
      </tr>
      <tr>
        <td>Papaya</td>
      </tr>
      <tr>
        <td>Mango</td>
      </tr>
      <tr>
        <td>Papaya</td>
      </tr>
      <tr>
        <td>Banana</td>
      </tr>
      <tr>
        <td>Kiwi</td>
      </tr>
    </tbody>
  </table>
  <table class="fruitsTable2 class">
    <thead>
      <th>Fruits</th>
    </thead>
    <tbody>
      <tr>
        <td>Mango</td>
      </tr>
      <tr>
        <td>Papaya</td>
      </tr>
      <tr>
        <td>Banana</td>
      </tr>
      <tr>
        <td>Kiwi</td>
      </tr>
    </tbody>
  </table>
  <table class="fruitsTable3 class">
    <thead>
      <th>Fruits</th>
    </thead>
    <tbody>
      <tr>
        <td>Banana</td>
      </tr>
      <tr>
        <td>Kiwi</td>
      </tr>
       <tr>
        <td>Banana</td>
      </tr>
      <tr>
        <td>Kiwi</td>
      </tr>
       <tr>
        <td>Banana</td>
      </tr>
      <tr>
        <td>Kiwi</td>
      </tr>
    </tbody>
  </table>
</div>

关于HTML 表格列高相等，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50691297/

25

4

0

文章推荐： hadoop - 如何设置集群中每个节点的 tasktracker 数量？

文章推荐： c++ - 如何检测我的代码是否使用 -fno-exceptions 进行编译？

文章推荐： Maven - 测试中的不同依赖版本

java - 为什么自动装箱的整数和 .getClass() 值 == 相等，而不仅仅是 .equals() 相等？
也许我在 Java 上工作的时间太长而没有真正理解它的一些基础知识。我确实理解 == 用于对象引用相等，而 .equals() 用于对象值相等。比较整数: Integer x = 1, y = 1
javascript - boolean 相等
我是从一道考试题中得出这个答案的，但无法理解该解决方案的工作原理。如果值“x”和“y”相等，则此函数应该返回“true”，否则返回 False。解决方法: function equal_boolea
Mysql utf8mb4 相等
我将带有表情符号的文本存储在 mysql 数据库中。数据库、表和列设置为使用utf8mb4和utf8mb4_unicode_ci。我可以毫无问题地输入单元格值(数据类型是 VARCHAR)。但是
PHP DateTime 相等
如果两个 DateTime 对象具有相同的日、月和年，我该如何比较？问题是他们有不同的小时/分钟/秒。最佳答案对于 DateTime 对象，没有好的方法可以做到这一点。所以你必须做，比方说，不是那
c# - GetHashCode 相等
我一直想知道这个问题，所以我想我会问的。您将看到的大多数地方都使用相同的语义逻辑来覆盖 Equals 和 GetHashCode 以实现成员平等...但是它们通常使用不同的实现: publi
comparison - CoreGraphics 中的浮点比较(相等)
苹果 CoreGraphics.framework , CGGeometry.h : CG_INLINE bool __CGSizeEqualToSize(CGSize size1, CGSize s
python - 由于最新的python版本保留了dict的插入顺序，相等(==)的含义会改变吗？
在最新的python 版本中， dict 保留了插入的顺序。在平等方面是否有任何变化。例如，目前以下工作。既然广告顺序很重要， future 会不会发生这种变化？我问是因为有根本性的变化 - 以前
django 过滤器两个 ManyToManyField 相等
class VideoUserModel(models.Model): user = models.ManyToManyField(get_user_model()) viewlist
coq - 枚举类型的 COQ 相等
我在 COQ 中有一个有限枚举类型(比如 T)，我想检查元素是否相等。这意味着，我需要一个函数 bool beq_T(x:T,y:T) 我设法定义这样一个函数的唯一方法是逐个分析。这会导致很多匹配语
fortran - 测试 float 相等
我在 Windows 7(32 位)下的 MinGW 中使用 gfortran 来编译 Fortran 代码。这是文件 testequal.f 中包含的最少代码: program test
java - jsp。枚举比较/相等
我有以下 jsp 片段: ${campaign.moderated}
python - 如何测试两个稀疏数组是否(几乎)相等？
我想检查两个稀疏数组是否(几乎)相等。而对于 numpy 数组，你可以这样做: import numpy as np a = np.ones(200) np.testing.assert_array_
c# - 自定义对象的值是否与 List<> 相等
我有以下类(class): public class MyDocuments { public DateTime registeredDate; public
c - for循环中两个 float 相等
这个问题已经有答案了: Is floating point math broken? (33 个回答) 已关闭 5 年前。我在这里想做的是，我采用一个精度值(小于 1)并打印 1/n 类型的所有数字
C 检查字符串的最后一个字符是否与 X 相等
我正在为我的arduino写一个草图，我想检查我的字符串的最后一个字符。例如: 如果输入是 cats- 我想看看最后一个字符(在我的例子中是“-”)实际上是否 - 我使用的代码: 串行事件函数 vo
c# - RuntimeMethodInfo 相等 : bug?
让我们开始: using System; public class Program { class A { public virtual void Do() { }
java - 仅根据某些键将两个 HashMap 相等
我只需要根据几个键(不是全部)来确定两个 HashMap 的相等性除了单独访问每个字段并比较相等性之外，还有其他节省时间的方法吗？最佳答案我能想到的一种方法是在您的 HashMap 上存储某种“
java - 测试是否与 double 相等
在Java中，大写的Double可以为null。但是如果我有 double a 和 b 并且我这样做: if (a.equals(b)) 如果其中之一为空，它会崩溃。有没有更好的方法来比较它们？最
mysql - 使用选择选项从另一个数据库插入并且两个数据库表 ID 相等
我正在尝试从我的旧数据库中插入表格数据。 Id 在数据库表和选择特定列中都相等。这是我的数据库。旧数据库:sch -> 旧表:product (id, tag, url) (13, red, aaa
css - 在容器内拆分两个 div 相等
我正在开发一个应用程序，它在我的主视图中有一个侧边栏和两个 div。我试图在容器内平均分割两者的高度。我试过 height = 50% 但效果不太好。

首页

博学

6Ren·AI

商城

HTML 表格列高相等