合并行&合并列

原创 2018-10-04 14:04:59 575
摘要:<style type="text/css"> *{margin: 0px; padding: 0px;}   table {border: 1px solid #ccc; border-collapse: collapse;}  &nb
<style type="text/css">
*{margin: 0px; padding: 0px;}
  table {border: 1px solid #ccc; border-collapse: collapse;}
  tr td {height: 200px; width: 100px; border:1px solid #ccc; }
  tr th {height: 200px; width: 100px; border:1px solid #ccc; }
</style>

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  <tr>
    <td colspan="5">合并行</td>
  </tr>
  <tr>
    <td rowspan="2">合并列</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<!-- table的高度不给,用td来撑开

table的宽度可通过td来撑,也可以直接设定好,让td来均分

通过td标签的colspan&rowspan用于『合并单元格』

th默认居中

td默认靠左


_注意_ margin: 0px;其中px单位不要忘记

tr td{}是tr中的td,有一层所属关系。tr td非非关联元素。即非tr{}, td{}。这是思维认识的一个漏洞||理解扭曲

同理tr th{}

table与tr td的融合需要一个border-collapse,否则出现双线情况 -->


发布手记

热门词条