Css 在表格中填写内容选择器

如何在Angular2中填写我的内容选择器？ 模板：

<table id="gboard"  >
  <tr *ngFor="let x of gameBoard">
    <td *ngFor="let field of x">
       <game-field [field]="field" (click)="handleClick(field)" [class.cross]="field.player==0"></game-field>
    </td>
  </tr>
  <table>

和css：

table, th, td, game-field { 
  border: 1px solid black;
   height: 50px;
}
td,game-field{
  width: 50px;
}
.cross{
  width: 45px;
height: 45px;
background: linear-gradient(to bottom, transparent 35%, #d00 35%, #d00 65%,  transparent 65%),
  linear-gradient(to right, transparent 35%, #d00 35%, #d00 65%, transparent 65%);
}
.circle{
  border-radius: 50%;
    width: 45px;
    height: 45px;
}

正如您所看到的，类选择器只填充文本区域-为什么，以及如何修复它？

添加

game-field { display: block; }

添加到CSS组件

game-field { display: block; }

---

到CSS组件

尝试添加

游戏字段{display:block；}

尝试添加

游戏字段{display:block；}