如何使 table 列的高度和宽度相等

Question

这是代码。我试着用 colgroup

<col style="width: 100px; height:100px;">

但是没用。这是 table 的 demo 我希望每一列都是 100px 高 100px 宽

Answer 1

试试这个片段：

body{
 font-size: 18px;
 font-family: "Lucida Sans Unicode";
}

.header {
 font-size: 60px;
 font-weight: bold;
 padding: 0 auto;
 text-align: center;
}

td{               /* ADDED */
    width: 100px;
    height: 100px;
}

<table border="1" cellpadding="25px"> 
  <tr>
    <td colspan="4" class="header"><span>SoftUni LIFE</span></td>
  </tr>
  <tr>
    <td colspan="2"><span>Google</span></td>
    <td colspan="2">GitHub</td>
  </tr>
  <tr>
    <td>FB</td>
    <td>GMail</td>
    <td>YouTube</td>
    <td>2048</td>
  </tr>
  <tr>
    <td>Food</td>
    <td colspan="2">Game</td>
    <td>
      <table border="1">
        <tr>
          <td>Social Life</td>
        </tr>
        <tr>
          <td>Sleep</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td colspan="3">Beer></td>
    <td>WC</td>
  </tr>
</table>

我刚刚添加了最后一个 css 规则来设置 td 个元素的高度和宽度。

这会将每个 td 的宽度和高度设置为 100px，并且那些具有 colspan 的将具有跨度的列数乘以默认 (100px) 宽度，与 rowspan 相同.

如何使 table 列的高度和宽度相等

How to make table columns' height and width equal

html

css

css-tables