如何设计这样的桌子

Posted 2023-03-05

【中文标题】如何设计这样的桌子

【英文标题】：How to design a table like this

【发布时间】：2018-07-10 11:44:09

【问题描述】：

如何设计如下示例的表格？在图像中 垂直文本对齐到指定列； 这种设计可行吗？

我在 fiddle 中添加了它，并使用了 bootstrap 和 CSS 样式。

 <table class="table table-bordered">
  <thead>
    <tr>

      <th colspan="3" style="background-color: rgb(252, 219, 21);">
        <img src="academic year 20.png" class="img-responsive" style="width: 10%;float:left;vertical-align:middle;margin-right: 35px; " />
        <h3 style="vertical-align:middle;margin-top:30px;">text sample</h3>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="fnt">text</td>
      <td class="prpl">texttexttexttext 1</td>
      <td class="prpl">texttext 2</td>
    </tr>
    <tr>
      <td class="fnt">text </td>
      <td class="ctr">-</td>
      <td class="ctr">-</td>
    </tr>
    <tr>
      <td class="fnt">text</td>
      <td class="ctr">-</td>
      <td class="ctr">-</td>
    </tr>
  </tbody>
</table>

Attached fiddle

【参考方案1】：

用这根绳子……

<table border ="1">
    <tr>
    <td colspan ="5">Text</td>
    <tr>
    <td colspan ="3"></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td rowspan ="6"></td>
    <td>1</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>2</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>3</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>4</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>5</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>6</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>

    <tr>
    <td rowspan ="5"></td>
    <td>7</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>8</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>9</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>10</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>11</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td rowspan ="3"></td>
    <td>12</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>13</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>14</td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>

使用这个 css 来美化。

td
padding : 10px;
margin : 3px;
width : 200px;
height : 100px;

这是基本的CSS。随心所欲定制。