Question

这里我附上了图片。如何像这张图片一样创建表格（HTML）

＆＃13;

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  td { border: 1px solid black; width: 50px; text-align: center; margin:0; padding:0; height:100%; }
  #span1 { background-color: #DDD; width: 25px; float: right; height:100%; }
  #span2 { background-color: #EEE; width: 24px; float: left; }
  .t { border-top: 1px solid black; }
  .r { border-right: 1px solid black; height: 100%; }

＆＃13;

<table>
    <tbody>
      <tr>
        <td>1</td><td>2</td><td>3<div><div id="span1" class="t">1</div><div id="span2" class="t r">1</div></div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2 2 2 2 2 22 2 </td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
      </tr>
      <tr>
        <td>1</td><td>2 2 2 2 2 2 2 2 </td><td><span style="line-height:2"><div id="span1">3</div><div id="span2" class="r">3</div></span></td><td>4</td>
      </tr>
    </tbody>
  </table>
  
  <table>
    <tbody>
      <tr>
        <td>q</td>
        <td>2</td>
      </tr>
    </tbody>
  </table>

＆＃13;

请参阅此URl：https://jsfiddle.net/L9haaLqg/

Answer 1

您需要在rowspan上使用td才能使其正常运行。我猜这就是你要找的东西。

rowspan将排除大td被拉伸到两行（在此示例中）。

＆＃13;

table {
  border: 2px solid black;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  vertical-align: top;
  border: 1px solid gray;
}

.explanation {
  width: 60%;
}

.smallbox {
  height: 50px;
  width: 10%;
}

＆＃13;

<table>
    <tbody>
      <tr>
        <td class="explanation" rowspan="2">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet iste doloribus saepe recusandae a aliquam nostrum quod, voluptatem impedit ut! Rerum quas, qui consequatur id maxime minima tempora obcaecati voluptas!
        </td>
        <td class="smallbox"></td>
        <td class="smallbox"></td>
        <td class="smallbox"></td>
        <td class="smallbox"></td>
      </tr>
      <tr>
        <td class="smallbox"></td>
        <td class="smallbox"></td>
        <td class="smallbox"></td>
        <td class="smallbox"></td>
      </tr>
    </tbody>
  </table>

＆＃13;

将td拆分为两列，如附加图像

1 个答案: