Question

嗨我是一个初学者在CSS我有这些表下面的3个单独的表，我想使所有的表列高度相等是否有任何简单的方法来解决这个问题？非常感谢任何建议，谢谢！

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

Answer 1

当CSS更改表格时，它是可能的，但它不是很好，

您可以在https://jsfiddle.net/10t4gv92/21/ 或

尝试此代码

＆＃13;

.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%; }

＆＃13;

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

＆＃13;

HTML表格等于列高

1 个答案: