Как правильно выбрать элемент в css

Question

Я хотел бы описать как прикрепленное изображение.

Я установил css селектор, но, кажется, он не работал.

Почему селектор не сработал?

И как я могу это исправить?

Спасибо.

td {
height:50px;
width:50px;
border:solid black 1px;
cursor:pointer;
background-color:aqua;}

.test{
border-radius:50%;
background-color:yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr>
      <td><div class="test"></div></td>
    </tr>
  </tbody>
</table>

Answer 1

вам просто нужно добавить эти два дополнительных свойства в .test в css.

.test {
    width: 100%;
    height: 100%;
}

Answer 2

Вам необходимо установить display, height и width. Если вы измените класс .test css на:

.test {
    display: block;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: yellow;
}

, он должен работать!

Answer 3

Попробуйте это.

    td {
        background-color: aqua;
        border: 1px solid black;
        padding: 0;
    }

    .test {
        background: yellow;
        width: 50px;
        height: 50px;
        border: 1px solid black;
        border-radius: 50%;
        box-sizing: border-box;
    }

Answer 4

У вас нет указанных height и width для вашего div.test, поэтому он не отображается. Возможно, вам придется поиграть с размерами, так как вы добавите к нему границу, которая немного сместит ее внутри вашего квадрата.

td {
  height:50px;
  width:50px;
  border:solid black 1px;
  cursor:pointer;
  background-color:aqua;
}

.test {
    background: yellow;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr>
      <td><div class="test"></div></td>
    </tr>
  </tbody>
</table>