Question

＆＃13;

<table id="list" style="display:table;border: 1px solid black;width:200px;border-collapse: collapse;">
  <p>Today's Tasks</p>
  <td colspan=100% style="background:lightgrey;display:table-row;border: 1px solid black;border-collapse: collapse;width:100%;">Restock Shelf C2</td>
  <br>
  <br>
  <td style="display:table-row;">Empty Garbage</td>
</table>

＆＃13;

正如您所看到的，第一个元素在表格的中间结束。我想也许它为下一个专栏腾出了空间？我不想要这个 - 我只想要每行1个单元格。

Answer 1

查看文档。 colspan属性将数字作为值，而不是百分比。它不是样式属性，而是逻辑声明。它需要此单元格应跨越的列数。你的例子中有2个。

除此之外：您不能在表格中放置<p>块，并且必须定义表格行（<tr>）以将表格单元格放入（<td>）。< / p>

看看这个修改过的例子：

<p>Today's Tasks</p>  
<table id="list" style="border: 1px solid black; width:200px; border-collapse: collapse;">
    <tr>
        <td colspan="2" style="background:lightgrey"> Restock Shelf C2</td>
    </tr>
    <tr>
        <td> Empty Garbage 1 </td>
        <td> Empty Garbage 2 </td>
    </tr>
</table>

这是展示标记的小提琴：https://jsfiddle.net/5oLw62wL/1/

如何让td表格单元格跨越表格的整个宽度？

1 个答案: