html - 如何在一个 <td> 单元格中制作两列?

标签 html css html-table

我正在尝试在一列中创建两列 <td>单元格,同时保持表格的其余部分完好无损。

这是我正在尝试做的示例 enter image description here

这是我的表格的代码笔:

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

我试着用 colspan 得到它并添加两列 <tr>但结果总是参差不齐。我也尝试添加一张 table ,但看起来一点也不好。有任何想法吗?

最佳答案

使用colspan如下:

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

关于html - 如何在一个 <td> 单元格中制作两列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51602265/

相关文章:

html - 如何修复底部的按钮并滚动剩余内容

html - 如何在div中用CSS写出下面的形状?

html - 自定义单选按钮填充

html - 为什么使用额外的 CSS 类来替换 H5 类会更好?

php - 如何将数据库中的信息显示到 html 表中?

jquery:如何根据文本输入隐藏表格

html - 具有绝对位置的 div 不会与相对位置的 div 重叠

JavaScript 奇怪的问题与 else if 语句

django - Bootstrap Writing In Columns(像报纸一样)

html - IE7 div 边框打印问题