Question

如何构建此表？我知道我可以创建具有属性visible：hidden的类并将该类应用于最后2个td标签。但是也许还有另一种不用CSS的方法。

table,
td,
th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 50%;
}

td,
th {
  padding: 30px;
}

<table>
  <tr>
    <th colspan="4">Table</th>
  </tr>
  <tr>
    <td rowspan="2"></td>
    <td colspan="3"></td>
  </tr>
  <tr>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 1

您正在尝试设置元素的样式或更改其外观，因此不可避免地要使用CSS。 visibility: hidden可能是您最好的选择。

colspan和rowspan起作用的原因是因为它们之间需要比较。最后四个td元素都具有colspan="1"，因此colspan="3"元素知道自己的宽度是colspan="1"元素的三倍。这就是为什么您需要在最后一行中包含四个元素，并隐藏其中两个元素以实现影响。

Answer 2

这只是在Getter模式下使用<div>的粗略尝试。它确实有效，但是您必须非常注意display:inline-block和 width个属性。

height

div {display:inline-block; border:1px solid grey;height:60px;vertical-align:middle;margin-bottom:-1px;margin-right:-1px}
div.vert2 {width:59px; height:121px; float:left}
div.five {width:300px}
div.four {width:239px}
div.three {width:179px}
div.two {width:119px}
div.one {width:59px}

Answer 3

使用网格布局。它将使您完全没有问题地建立这类表。

    public GroceryTableCell(IntPtr handle) : base(handle)
    {
    }

    internal void UpdateCell(FoodStruct currentItem)
    {
        double Price = 9.99;
        ItemDescription.Text = currentItem.FoodDescription;
        ItemPrice.Text = Price.ToString();
    }
    protected void AddToCartClicked ( UIButton sender)
    {
        YourGroceryCart(sender);
    }

    protected string YourGroceryCart(UIButton sender)
    {

    }
}

.container {
      outline: 1px solid rgba(0,0,0,0.15);
      margin: 20px auto;
      display: grid;
      width: 400px;
      height: 240px;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
      grid-template-areas: 'bx1 bx1 bx1 bx1'
                           'bx2 bx3 bx3 bx3'
                           'bx2 bx4 bx4 null1'
                           'bx5 bx6 null2 null2';
    }
    
    .box {
      border: 1px solid #000;
    }
    
    .b1 {grid-area:bx1;}
    .b2 {grid-area:bx2;}
    .b3 {grid-area:bx3;}
    .b4 {grid-area:bx4;}
    .b5 {grid-area:bx5;}
    .b6 {grid-area:bx6;}

如何在HTML中创建特定的表？

3 个答案: