Question

如何设计如下例子的表格？在图像中垂直文本对齐直到指定列; 这个设计有可能吗？

我已经将它添加到小提琴中，并使用了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

Answer 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。根据需要定制。

如何设计这样的表格

1 个答案: