时间戳

首页 > 解决方案 > 如何重新合并合并的单元格？

html - 如何重新合并合并的单元格？

问题描述

我需要在 HTML 中构建一个表格以显示L如下图所示。

我只能这样做

我只能这样做

但我想这样做

但我想这样做

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>


<table width="500" height="100">
  <tr>
    <td rowspan="5"  bgcolor="#912f38"></td>
    <td colspan="2" bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td colspan="3" bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td rowspan="4"  bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td rowspan="4" bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td rowspan="5" bgcolor="#912f38"></td>
  </tr>
  <tr>
    <td bgcolor="white"></td>
    <td bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td colspan="3" bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
  </tr>
  <tr>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
  </tr>
  <tr>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td colspan="3" bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td colspan="3" bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td bgcolor="#912f38"></td>
    <td bgcolor="white"></td>
    <td bgcolor="white"></td>
    <td colspan="3" bgcolor="#912f38"></td>
  </tr>
</tbody>
</table>

标签： html

解决方案

First of all use class not inline styles so you can alter multiple hetml elements at the same time. Here's and example class for your "L" and you can do something similar for your other table cells.

....
<td bgcolor="white"></td>
<td rowspan="4" class="top-and-left-and-right-only"></td>
...

Css:

    .top-and-left-and-right-only{
       border-bottom-color:#912f38;
       background-color:#912f38;
     }

推荐阅读