Question

出于某种原因，我需要在HTML和CSS中执行此（丑陋）表。我发现transform属性的旋转值可以帮助我，但我真的不能像图片中那样完成。图片来自Word文档。

是否有工具可以在HTML和CSS中创建类似的表？

Answer 1

尝试这样做.. 根据我们的项目要求，灵活性是必要的。这也是对电子邮件模板的内联CSS支持。

<!doctype html>
<head>

<style type="text/css">

   td{
    border:1px solid;
   }


</style>

</head>
<body>





<table border="0" cellpadding="0" cellspacing="0" style="width: 1000px; margin: 0px auto; border-spacing: 0px ! important;">



<tbody>


     </tbody>
     <thead>

         <tr>

             <td style="width: 20%;text-align: center;">No</td>
             <td style="width: 40%;text-align: center;">1</td>
             <td style="width: 40%;text-align: center;">2</td>

         </tr>
         </thead>

<tr>

     <td>
                  <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
                    <tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
                        <tr style="width: 100%;">

                            <td style="text-align: center; width: 30%; height: 190px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p> 1</p>
                                </div>
                            </td>
                            <td style="width: 30%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p>2</p>
                                </div>
                            </td>
                            <td style="width: 30%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p>3</p>
                                </div>
                            </td>
                        </tr>

                    </tbody>

                  </table>
    </td>

    <td>

         <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
                    <tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
                        <tr style="width: 100%;">

                            <td style="text-align: center; width: 14%; height: 190px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p> 1</p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p>2</p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p>3</p>
                                </div>
                            </td>
                            <td style="text-align: center; width: 14%; height: 190px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p> 4</p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p>5</p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p>6</p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p>7</p>
                                </div>
                            </td>
                        </tr>

                    </tbody>

                  </table>

    </td>



   <td>
        <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
                    <tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
                        <tr style="width: 100%;">

                            <td style="text-align: center; width: 14%; height: 190px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p> 1</p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p>2</p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p>3</p>
                                </div>
                            </td>
                            <td style="text-align: center; width: 14%; height: 190px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p> 4</p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p>5</p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p>6</p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p>7</p>
                                </div>
                            </td>
                        </tr>

                    </tbody>

                  </table>
     </td>


</tr>



<tr>

     <td>
                  <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
                    <tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
                        <tr style="width: 100%;">

                            <td style="text-align: center; width: 30%; height: 30px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p> </p>
                                </div>
                            </td>
                            <td style="width: 30%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 30%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                        </tr>

                    </tbody>

                  </table>
    </td>

    <td>

         <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
                    <tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
                        <tr style="width: 100%;">

                            <td style="text-align: center; width: 14%; height: 30px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p> </p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="text-align: center; width: 14%; height: 30px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p> </p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                        </tr>

                    </tbody>

                  </table>

    </td>



   <td>
        <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
                    <tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
                        <tr style="width: 100%;">

                            <td style="text-align: center; width: 14%; height: 30px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p> </p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="text-align: center; width: 14%; height: 30px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                        </tr>

                    </tbody>

                  </table>
     </td>


</tr>

<tr>

     <td>
                  <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
                    <tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
                        <tr style="width: 100%;">

                            <td style="text-align: center; width: 30%; height: 30px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p> </p>
                                </div>
                            </td>
                            <td style="width: 30%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 30%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                        </tr>

                    </tbody>

                  </table>
    </td>

    <td>

         <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
                    <tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
                        <tr style="width: 100%;">

                            <td style="text-align: center; width: 14%; height: 30px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p> </p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="text-align: center; width: 14%; height: 30px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p> </p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                        </tr>

                    </tbody>

                  </table>

    </td>



   <td>
        <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
                    <tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
                        <tr style="width: 100%;">

                            <td style="text-align: center; width: 14%; height: 30px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p> </p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="text-align: center; width: 14%; height: 30px;">
                                 <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                            <td style="width: 14%; text-align: center;">
                              <div style="transform: rotate(-85deg);" class="rotate">
                                     <p></p>
                                </div>
                            </td>
                        </tr>

                    </tbody>

                  </table>
     </td>


</tr>




     <tbody>


     <tr>



     </tr>



</tbody>









</table>




</body>


</html>

Answer 2

固定高度只需要在单元格中设置一个额外的元素即可旋转和平移。

您需要将宽度虚拟地减小到零并将宽度（=最小宽度）设置为td。请参阅下面的代码段：

＆＃13;

table,
th,
td {
  border-spacing: 0;
  border: 1px solid;
  text-align: center;
}
.rt {
  height: 150px;/* fixed height . set fixed width to rotated elements */
}
.rt td {
  vertical-align: top;
  width: 3em;
  /* allow about 2 lines in rotated cells */
}
.rt .rotated {
  width: 130px;/* a liitle less than parents height */
  transform: rotate(270deg) translatex(-100%);
  transform-origin: top left;
}
.nowidth {
  margin-right: -130px; /* reduce virtually width needed */
}

＆＃13;

<table>
  <thead>
    <tr>
      <th colspan=3>th</th>
      <th colspan=3>th</th>
    </tr>
  </thead>
  <tbody>
    <tr class="rt">
      <td>
        <div class="rotated nowidth">
          content to rotate
        </div>
      </td>
      <td>
        <div class="rotated nowidth">
          content to rotate okay
        </div>
      </td>
      <td>
        <div class="rotated nowidth">
          content to rotate
        </div>
      </td>
      <td>
        <div class="rotated nowidth">
          content to rotate
        </div>
      </td>
      <td>
        <div class="rotated nowidth">
          content to rotate
        </div>
      </td>
      <td>
        <div class="rotated nowidth">
          content to rotate
        </div>
      </td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 3

table, td, th {
  border-spacing: 0;
  border: 1px solid;
  border-collapse: collapse;
  text-align: center;
  table-layout: fixed;
  width: 100%;
}

.vert > td > div {
  overflow: hidden;
}

.vert > td > div > div {
  display: inline-block;
  vertical-align: middle;
  transform: rotate(-90deg);
  line-height: 1em;
}

.vert > td > div:before {
  content: "";
  height: 0;
  padding-top: 100%;
  display: inline-block;
  vertical-align: middle;
}

<table>
  <thead>
    <tr>
      <th colspan=3>th</th>
      <th colspan=3>th</th>
    </tr>
    <tr class="vert">
      <td><div><div>The first rotated header goes here</div></div></td>
      <td><div><div>The second rotated header goes here</div></div></td>
      <td><div><div>The third rotated header</div></div></td>
      <td><div><div>One more rotated header</div></div></td>
      <td><div><div>And even more</div></div></td>
      <td><div><div>And the last one</div></div></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
  </tbody>
</table>

转换在HTML和CSS中旋转表头

3 个答案: