表格单元格角落的按钮;中心的文字

Question

我想制作一个5x5网格，每个单元格都有单词。但每个单元格在每个角落都有一个按钮。我对它做了一个图像：

我真的不知道该怎么做。我怎样才能制作这些＆＃34;角落按钮＆＃34;文本在中心？

<table>
  <tr>
    <td>
      ??
    </td>
    [..]
  </tr>
  [..]
</table>

Answer 1

我建议使用CSS实现这一目标非常容易。

这是一个非常快速的＆amp;只是我用一个盒子做的例子......

.box {
  background: white;
  border: 2px solid #000;
  height:100px;
  width: 100px;
  position: relative;
  text-align: center;
  line-height:100px;
  font-family: Arial;
  font-size: 12pt;
}
.tri {
  width: 0px;
  height: 0px;
  position: absolute;
}
.tl_tri {
  border-right: 20px solid transparent;
  border-top: 20px solid green;
  top: 0px;
  left: 0px;
}
.tr_tri {
  border-left: 20px solid transparent;
  border-top: 20px solid red;
  top: 0px;
  right: 0px;
}
.bl_tri {
  border-right: 20px solid transparent;
  border-bottom: 20px solid grey;
  bottom: 0px;
  left: 0px;
}
.br_tri {
  border-left: 20px solid transparent;
  border-bottom: 20px solid yellow;
  bottom: 0px;
  right: 0px;
}

CSS：

struct i2c_client *foo_i2c_client;

static int foo_probe(struct i2c_client *client,
                          const struct i2c_device_id *device_id)
{
    foo_i2c_client = client;
    // implementation
}

static int foo_remove(struct i2c_client *client)
{
    // implementation
}

static const struct i2c_device_id foo_id[] = {
    {"foo0", 0},
    {},
};

static struct i2c_driver foo0_i2c_driver = {
    .driver = {
        .owner = THIS_MODULE,
        .name = "foo0",
    },
    .probe = foo0_probe,
    .remove = foo0_remove,
    .id_table = foo_id,
};

static int send_cmd(u8 slv_addr, u8 *buffer, u16 size)
{
    foo_i2c_client->address = slv_addr;
    i2c_master_send(foo_i2c_client, buffer, size);
    // rest of implementation
} 

MODULE_DEVICE_TABLE(i2c, foo_id);

module_i2c_driver(foo0_i2c_driver);

这在这里工作证明：

https://jsfiddle.net/0qtj0o0z/