如何正确旋转表格单元格内的文本

Question

如何正确旋转表格单元格内的文本

Sil*_*van 6 html css html-table

我尝试创建一个带有顶部和左侧标题的经典 HTML 表格。\n现在我想将左侧标题中的文本旋转-90\xc2\xb0。

\n\n

CSS仅支持90\xc2\xb0，写入模式为：vertical-rl；。

\n\n

使用transform: turn (-90deg);Witout时position:absolut;，它不会随着表格变长而动态适应。

\n\n

我发现：如何控制包含旋转文本的表格标题单元格的宽度？\n

\n\n

但left:需要根据标题的长度进行调整。

\n\n

-

\n\n

有没有办法让左侧标题中的元素与元素<div>的高度一样高，而又不影响它并适合它？<td>

\n\n
文本也应该在一行上，不换行，overflow:hidden;这意味着最大高度应该由表格定义，而不是由左侧标题内的文本长度定义。
\n\n
\r\n
\r\n
table {\r\n text-align: left;\r\n border-collapse: collapse;\r\n}\r\n\r\ntd,\r\nth {\r\n border: 1px solid lightgrey;\r\n padding: 0px 3px;\r\n}\r\n\r\ntd:not(:first-child) {\r\n min-width: 140px;\r\n}\r\n\r\n.table_title_top {\r\n text-align: center;\r\n}\r\n\r\n.table_title_left {\r\n text-align: center;\r\n width: 35px;\r\n}\r\n\r\n.table_title_left div {\r\n display: flex;\r\n position: absolute;\r\n flex-wrap: nowrap;\r\n text-align: center;\r\n transform: rotate(-90deg);\r\n height: 35px;\r\n left: 0px;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<!DOCTYPE html>\r\n<html lang="en" dir="ltr">\r\n\r\n<head>\r\n <meta charset="utf-8">\r\n</head>\r\n\r\n<body>\r\n <table>\r\n <tbody>\r\n <tr>\r\n <td></td>\r\n <td colspan="100" class="table_title_top">\r\n <div>Title Top Title Top</div>\r\n </td>\r\n </tr>\r\n <tr class="calc-tr calc-tr-title">\r\n <td rowspan="100" class="table_title_left">\r\n <div>Title Left Title Left</div>\r\n </td>\r\n <td>0</td>\r\n <td>0</td>\r\n <td>0</td>\r\n </tr>\r\n <tr>\r\n <td>0</td>\r\n <td>0</td>\r\n <td>0</td>\r\n </tr>\r\n <tr>\r\n <td>0</td>\r\n <td>0</td>\r\n <td>0</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</body>\r\n\r\n</html>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n
\n

Answer 1

Tem*_*fif 5

您可以writing-mode: vertical-rl;与比例变换结合使用：

table {
  text-align: left;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid lightgrey;
  padding: 0px 3px;
}

td:not(:first-child) {
  min-width: 140px;
}

.table_title_top {
  text-align: center;
}

.table_title_left {
  text-align: center;
  width: 35px;
}

.table_title_left div {
   writing-mode: vertical-rl;
   white-space:nowrap;
   transform:scale(-1);
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td></td>
        <td colspan="100" class="table_title_top">
          <div>Title Top Title Top</div>
        </td>
      </tr>
      <tr class="calc-tr calc-tr-title">
        <td rowspan="100" class="table_title_left">
          <div>Title Left Title Left</div>
        </td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，6 月前
查看次数：	2851 次
最近记录：	6 年，6 月前