首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在一个<td>单元格中创建两列?

如何在一个<td>单元格中创建两列?
EN

Stack Overflow用户
提问于 2018-07-31 05:04:15
回答 1查看 11K关注 0票数 4

我试图在一个<td>单元格中创建两列,同时保持表的其余部分不变。

下面是我正在尝试做的一个示例

下面是我的表格的一个codepen:

https://codepen.io/akamali/pen/XBVxxZ

我试着用colspan来获取它,并在里面添加了两列<tr>,但结果总是不均匀。我还试图添加一个表,但看起来一点也不好。有什么想法吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-31 05:08:57

按如下方式使用colspan

代码语言:javascript
复制
.table {
  width: 100%;
  background-color: #ffffff;
  border: 4px solid #979797;
}

.table td {
  border-right: 2px solid #979797;
  border-bottom: 4px solid #979797;
  padding: 50px;
  height: 10px;
}

.table td:nth-child(3n+0) {
  border-right: 4px solid #979797;
}

.table td:last-child {
  border-right: none;
}

.table tr:last-child td {
  border-bottom: none;
}
代码语言:javascript
复制
<div>
  <table class="table">
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="2"></td>
      <td colspan="2"></td>
      <td colspan="2"></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="2"></td>
      <td colspan="2"></td>
      <td colspan="2"></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="3"></td>
      <td colspan="3"></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

票数 10
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51602265

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档