Question

我试图用HTML做表，我遇到了问题。不知道如何做我要解释的事情：

是否有可能将低于/相邻的具有长垂直文本的单元格转换为小方格式而不从其上方的单元格中取出相同的长垂直文本格式？

这是HTML文档：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Marge Cells</title>
<link rel="stylesheet" type="text/css" href="dudas.css">
</head>
<body>
<table border="1px">

    <tr>
        <td>
       </td>
       <td class="Rotate-90">
       corto
       </td>
       <td class="Rotate-90">
        text&nbsp;muuuuy&nbsp;largo
       </td>
   </tr>
   <tr>
        <td>
        Cuentas
       </td>
       <td>
        11.2€
       </td>
       <td>
        1€
       </td>
   </tr>
</table>
</body>
</html>

这里是CSS：

@charset "UTF-8";

.Rotate-90
{
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  position:relative;
  height: 15px;
  width: 30 px;
}

table {
border-collapse: collapse;
}

这是我想要实现的目标的图片

enter image description here

Answer 1

---新---

现在我明白你了..

.table-r {
  border-collapse: collapse;
}
.table-r td {
  width: 30px;
}
..table-r th {
  padding: 5px 10px;
}
.table-r td {
  text-align: center;
  padding: 10px 5px;
  border: 1px solid #ccc;
}
.table-r th.th-r {
  height: 140px;
  white-space: nowrap;
}
.table-r th.th-r > div {
  transform: translate(25px, 51px) rotate(315deg);
  width: 30px;
}
.table-r th.th-r > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}
.table-header-rotated th.row-header {
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
}

<table class="table-r">
  <thead>
    <tr>
      <th class="th-r">
        <div><span>Header 1</span>

        </div>
      </th>
      <th class="th-r">
        <div><span>Header 2</span>

        </div>
      </th>
      <th class="th-r">
        <div><span>Header 3</span>

        </div>
      </th>
      <th class="th-r">
        <div><span>Header 4</span>

        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

---老--- 这是你的意思吗？

.Rotate-90 {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  position: relative;
  height: 15px;
  width: 30 px;
}
table {
  border-collapse: collapse;
}

<table>
  <tr>
    <th rowspan="4" class="Rotate-90">text vertical</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr>
    <td>4</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>14</td>
    <td>15</td>
    <td>16</td>
  </tr>
</table>

你有rowspan和colspan。

colspan这样做：

+-------------------+
| 1                 |
+-------------------+
| 3  | 4  | 7  | 8  |
+----+----+----+----+
| 9  | 10 | 11 | 12 |
+----+----+----+----+
| 13 | 14 | 15 | 16 |
+----+----+----+----+

rowspan执行此操作：

+----+----+----+----+
| 1  | 2  | 3  | 4  |
+    +----+----+----+
|    | 4  | 7  | 8  |
+    +----+----+----+
|    | 10 | 11 | 12 |
+    +----+----+----+
|    | 14 | 15 | 16 |
+----+----+----+----+

Rowspan和Colspan合并：

+---------+----+----+
| 1       | 3  | 4  |
+         +----+----+
|         | 7  | 8  |
+---------+----+----+
| 9  | 10 | 11 | 12 |
+----+----+----+----+
| 13 | 14 | 15 |    |
+----+----+----+----+

合并HTML中的单元格

1 个答案: